Expanding read more/less dynamic text area

Hi,

Does Webflow have built in read more/less expanding div functionality? I’m looking to use this with the CMS, specifically to have Events, with associated title, date, and description… and the description would be limited to 50 characters, with a read more link. Clicking that link would reveal the rest of the text in place.

I’m not asking someone to code this for me–merely wondering if this is possible in Webflow. Thank you!

You can’t limit characters, but you can set the height of an element and hide the overflow, then use an interaction to increase the height to display the hidden text.

Alternatively, there is custom CSS you can use to limit characters text-overflow - CSS: Cascading Style Sheets | MDN

Ah, thank you. But if they were pulling from the CMS and some were, say, 1,000 characters, and others 2,000 characters, there would be no way to dynamically show the full text, if you don’t know the height, correct?

http://sandbox-903b9c.webflow.io/blog-posts

2 Likes

Amazing, thanks, Sam. I’ll contact you privately to see if you’d be interested in consulting.

This particular use case I’m trying to reproduce in Webflow requires stacking the posts, like a traditional blog feed. When the post expands/collapses, all the content below moves accordingly.

sam - could you please make this cloneable? i’m still trying to figure it out!

Great solution, but HOW did you do it? I can open the read-only webflow project, but I find no custom code or interactions activated. @samliew Would love if you shared this as I find it very valuable!

That´s exactly what I was looking for – first I did not realise how the example was done, but finally I did :slight_smile:

So, in case somebody still needs it:
This example was done with Interactions 1.0. The interaction can only be seen if you turn on “Lecacy Interactions” at the bottom of the interactions panel.

In the current version of Interactions (2.0) you can also address the height-property but now it´s in “Scale”, it´s not called “Transform” anymore.

Cheers,
Manuel

Yes, that is correct. You can also do this in IX2.

Great solution. BUT, what if small portion of text comes from CMS? Like 1-2 lines? Will you still have show more button?

Good solution, but a quick note so you don’t go crazy - which is mentioned in this post:

(if you don’t set the height to be auto in the designer before being handle by interactions you would probably experience some buggy behaviour)