Streaming live at 10am (PST)

Expand truncated collection item content

Hey,

I created a table filled with items from a collection. One of the columns (as in the screenshot) contains longer content that gets truncated.

webflow

I’d like to enable users to expand this cell by clicking on it / hovering over it. I haven’t found a good way to do it though.

I’ve found @Maciej’s tooltips extension (Tooltipster for Webflow - easy to use plugin for tooltips) and @sabanna’s custom lightbox solution (Custom lightbox with dynamic content) but I couldn’t make them work with collection items.

Any other ideas? :pray:


Here is my site Read-Only: https://preview.webflow.com/preview/getscrapbook?utm_medium=preview_link&utm_source=designer&utm_content=getscrapbook&preview=111a26b5187c75f0beb15ba7eea6032d&pageId=5dd044a0b8df8178182ce67b&mode=preview

You can use a simple jQuery custom code.
First create a combo class is-expanded on element with max-height set to none - see screenshot.

Then remove this is-expanded class - it will still be available but by default not applied to the element.
Screenshot 2020-01-09 at 10.50.08

Add a custom code

<script>
    $(document).on('click', '.description.item', function() {
      $(this).toggleClass('is-expanded');
    });
</script>

The above code can be explained as:
When element with classes "description" and "item" is clicked, add or remove the class "is-expanded" to the clicked element

1 Like

Thanks, @Maciej. It does the job but it’s not a perfect solution UX-wise to expand a table’s row this way :wink:

Do you know any working solutions to this using modals/tooltips?