Toggle replacement text

1 month 5 hours ago #78162

Calvin's Avatar Calvin

I've searched the forum as best I can, and found some similar topics in this category, so am posting my question here.

I am trying to figure out a way to set up toggled text. That is, text that gets substituted out with other text, then toggled back.

My primary reason is to have a "show more" link after an intro paragraph. When someone clicks on that link, additional content replaces the "show more" link, forcing all later content to get pushed down. As part of the replacement, a link will be at the bottom of the next content, "show less". When someone clicks on that, the new content goes away and the "show more" link returns.

This is similar to how YouTube does their descriptions -- if it is too long, they have a Show more link, then a Show less afterwards to contract the new content.

I'd like this to be done smoothly, not abruptly, which is similar to how the Sliders work. I want the illusion that the new text is pushing the lower text down.

This is not quite accordion/Slider's behavior as I don't want the link to remain at top. As far as the user is concerned, I'd want it so that clicking on the "Show more" simply makes it appear as though the original content is much longer than before. The Slider leaves the link in place above the new content.

Can you suggest a way to do this using any combination of your extensions (I have a lifetime subscription to all your extensions).


1 month 1 hour ago #78164

Peter van Westen's Avatar Peter van Westen Admin

You can show a different text as the clickable title:

3 weeks 6 days ago #78168

Calvin's Avatar Calvin

Is there any way, even using a trick, to make it appear as though the "close title" is BELOW the opened text? This would give the illusion that the new content has filled in ABOVE the title. My intent is to make this into a single instance of expanded text.


Yada, yada, yada
Show more link...


Yada, yada, yada
<new content>
Show less link...


3 weeks 5 days ago #78174

Peter van Westen's Avatar Peter van Westen Admin

You can manually add a 'Show less' link at the bottom of your content that triggers the closeSlider() javascript function:

<a href="javascript:closeSlider('id-of-the-sliders');">Show less</a>

You can hide the active slider title via css: .rl_sliders-toggle {
   display: none;

1 week 4 days ago #78543

Calvin's Avatar Calvin

Thank you for all your help. After some trial-and-error and fussing with CSS, I was able to accomplish what I envisioned.

Perhaps you may want to add this capability to Sliders as it isn't easily accomplished using any other extension that I've found.

Confidential information:

Thanks again.

1 week 3 days ago #78548

Peter van Westen's Avatar Peter van Westen Admin

Nice work.