How do you add a 'read more' link to grow a text element

[Siddhartha]

I have several text elements that are many paragraphs wrong. I figured it would be neater to shrink down the text element and have a ‘read more’ link (as many other sites do). When the reader clicks that link the element grows to full size.

I was wondering if there is a quick and easy way to do this, or a plugin maybe.

[stone]

Might be a better way to do this but here’s one.

Take your text and truncate it to a certain number of characters.

Then click a button/text which toggles a custom state which in turn changes the text source to the full text.

Make sure to put your text element’s height to the same height as your font size, it will expand automatically.

[Siddhartha]

I’ll give that a try @stone and let you know how it goes.

I was hoping there might be a more elegant way or a plugin, as I have quite a few of these to setup as at the moment the pages are a bit text heavy. I suppose an alternative for my needs might be to use a popup box with the full text in. That might look neat too.

Thanks as always.

[dserber]

Another way to get a similar effect is to truncate the text and show the full text in the tooltip which will display on hover over.

[jcindy81]

You could put your first bit of text into a text element, and your expanded text into a second element, which is inside a group. Set the group to collapse height when hidden. Have it hidden by default. Create a button for “read more” have this button toggle the hidden group. Animate the collapse. It works great. You can even add a condition on the button, so that when the group is visible, the text changes to “read less” or something.

[stone]

@jcindy81

You could put your first bit of text into a text element, and your expanded text into a second element

This is probably the best looking way to do this.

So the first element height would be: font size * how many lines you want of text you want with “cut off text” and second one just have it expand naturally without cutting off.

[jcindy81]

Right. It’s like having a snippet of a blog entry with a read more that shows the full text.

[keith]

Here:

Splitting text 1st X characters, 2nd X characters, 3rd, etc

Hey @patricia and @eddy: Here’s a way… [image] This results in: [image] It should be fairly obvious how this works, but if not, here’s an explanation: We first truncate to roughly desired number of characters (105 in my example). Because the character in that last position (105) may or may not be whitespace, I :trimmed the truncated string to remove any preceding/trailing whitespace. This ensures that last character is not whitespace. Regex operator \s(\w+)$ matches the word at the very e…