kacper7
(Kacper)
January 8, 2020, 10:08pm
1
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.
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 - #5 by Maciej ) and @sabanna ’s custom lightbox solution (Custom lightbox with dynamic content ) but I couldn’t make them work with collection items.
Any other ideas?
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
Maciej
(Maciej Sawicki)
January 9, 2020, 9:45am
2
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.
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
kacper7
(Kacper)
January 9, 2020, 9:53pm
3
Thanks, @Maciej . It does the job but it’s not a perfect solution UX-wise to expand a table’s row this way
Do you know any working solutions to this using modals/tooltips?