Create a 'read more'/dropdown caption

[jordan_vd_berk]

Hi guys!

Does anyone know how to make a dropdown/‘read more’ button that let’s texts collapse?
Something like this:

[Mari]

Hi, you can truncate the text to a length of your choosing using the TRUNCATE() formula function.

When “Continue Reading” is clicked, are you looking to display the full text in the same component or go to a detail page?

[jordan_vd_berk]

Hi!

Awesome tip!
I would love the rest of the text to appear in the same component
How to do that?

[Mari]

Hi, I’d make a new composite component for this with an internal property showFull (true/false). That would be false at the beginning and then change to true when “Read more” or “Show less” is clicked.

The composite component would be a container with a conditional renderer component inside. In the conditional renderer I would have two different containers, one with the truncated text and a “Read more” text, and another with the full text and a “Show less” text. I would then give these containers render ID’s of full and short and show one or the other based on the value of showAll, binding the active render ID to IF(showFull, full, short).

[Dominik_Greene]

This is great, @Mari or @Cecilia, and does work fine for single components. Thank you. But how would you recommend making it work on a per-post basis in a repeated list?

I’ve fiddled with Set Repeated Item Value components and the like but, as it currently stands, expanding one post results in all posts expanding. Thoughts, please?

An example of a post. The “Show full answer” is just a paragraph text component used as a button.

[Mari]

Hi, here’s one way to do it:

1. Create a base component and click on the plus icon to turn it into a composite component:

2. Go to isolation mode (double-click the composite) and give the composite a private true/false variable showFull (in “Properties” view, switch is on the top of the canvas)

3. In isolation mode, change the value of showFull when “Show more” is tapped

4. Add the text content as an internal property of the composite:

5. Bind the contents of the paragraph to IF(privateVars.showFull, internalProps.Content, TRUNCATE(internalProps.Content, 30)) to change between full text and the snippet based on the value of showFull

6. Repeat this composite component with a list of objects and bind the “Content” property you created to the content you want to display.

7. Ta-da!
   

   

8. To improve the experience, you can easily switch between short and long by always setting the value of showFull to its opposite with formula !showFull. You could also use an IF statement in the button text to change it from “Show more” to “Show less” based on the value of showFull.

[Dominik_Greene]

Thank you, Mari! I didn’t realize how versatile isolation mode could be. After a few days experimenting with it all, I have it mostly looking as we want. The only problem seems to be setting the Show More paragraph button to appear only when 300 or more characters exist in the post. 300 characters is the cutoff/truncation trigger.

I figured a simple IF formula set in the Visibility section of the component would be good enough. It’s possible I’m just not getting the less-than/greater-than formatting correct. Could you take a look, please?
IF(LENGTH(repeated.current.Answers1 > 300), true, false)

It does not appear at all in the rendered app with the formula.

[Mari]

Hi, great to hear you’ve got it working!

You just need to put the comparison outside of the LENGTH() formula, so that the 1st argument of the formula is a statement that evaluates to true or false. If you have the comparison inside LENGTH(), you’re trying to evaluate the length of the true/false value itself, which results in an error.

IF(LENGTH(repeated.current.Answers1) > 300, true, false)

You can also express this without the IF, the statement is redundant since you are just returning the true/false value that the first argument evaluates to anyway:

LENGTH(repeated.current.Answers1) > 300

[Dominik_Greene]

Brilliant! Much obliged, Mari.

The only other issue I had was hiding the paragraph button after clicking. It worked fine with a private Boolean variable when its visibility was bound to it directly – not so much when you need the LENGTH formula to make it visible and then the logic flow to hide it again manually. Do you reckon there’s a way to have the button bound to the variable and trigger the variable to be true (visible) when the LENGTH formula is valid?

Currently, I’m “faking” it with a fade-out animation which does visually hide the button, but it still exists, of course, on the page taking up vertical space. The Hide Component logic did not work at all.