Sliders

Toggle replacement text

9 months 3 weeks 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).

Thanks.

9 months 3 weeks ago #78164

Peter van Westen's Avatar Peter van Westen Admin

You can show a different text as the clickable title:
www.regularlabs.com/extensions/sliders/t...opened-closed-titles

9 months 3 weeks 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.

Thus:

Yada, yada, yada
Show more link...

becomes

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


Thanks.

9 months 3 weeks 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-group.active .rl_sliders-toggle {
   display: none;
}

9 months 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:
(hidden)


Thanks again.

9 months 4 days ago #78548

Peter van Westen's Avatar Peter van Westen Admin

Nice work.

7 months 3 days ago #79826

Kevin Brackley's Avatar Kevin Brackley

Don't you just hate searching and searching for a solution and when you find a thread that is similar, you waste your time following it only to find out that the answer isn't shared...threads like this need to be removed if they don't answer or provide a solution to the question 🤔

7 months 3 days ago #79827

Peter van Westen's Avatar Peter van Westen Admin

@Calvin Do you want to share the link to your site publicly? Or share the css?

5 months 3 weeks ago #80548

Calvin's Avatar Calvin

Sorry for the delayed response - I didn't notice Kevin's post until now.

I don't have a problem sharing the webpage where I implemented the solution. Just as a personal policy I don't like to share client sites without permission, but I don't think they'll mind a simple link.

Here's the page showing the finished solution: biglife.org/photos-videos/short-films-gallery . As you can see, I've got a "show more" link under the descriptions that expands/contracts on click.

Here is the code I used to accomplish the expansion/contraction:
====================
{slider title="Show more..." open="false" scroll="false"}

The film features animal footage shot in Amboseli in July 2012 by Nick Brandt, and interviews from earlier in the year with Richard Bonham, as he and his teams pursue poachers within the East African Amboseli ecosystem where Big Life currently operates.
{source}
<a href="javascript:closeSlider('id-of-the-sliders');">Show less</a>
{/source}

{/sliders}
====================

The problem is that if you use this, you will still have the "Show more" box at the top of the expanded text, and that box will have a 1px border and color background.

To get rid of these, you have to do a CSS override on the Sliders "style.css" file. There are two of them, one is minified and can't easily be edited, the other is not. As Peter explains, if you edit the non-minified one but name it with "min", it will get used. The location of this file is shown here: www.regularlabs.com/extensions/sliders/tutorial#custom-styling . This assumes you know how to do a Joomla override (which is its own set of instructions).

Once you've created your new "style.min.css" override file in your template override folder, use your browser's "inspect element" to find the classes you need to change and edit the CSS to match. In my case, I needed to remove the 1px border from the title box (changed to 0px), the background color for it (I think I made it transparent), and to give it a "display: none" so it would hide the "Show more".

Hopefully this helps anyone who'd like to replicate what I did.

5 months 3 weeks ago #80549

Peter van Westen's Avatar Peter van Westen Admin

Thanks for sharing!