XF 1.2 Expandable text on XF pages

[Andy.N]

I'd like to put some text on XF pages and just show all when they click on a link or button.
I know there are JS scripts to do this but would prefer to use anything that is already available in XF.
Is there any class on XF that I can use?

 

[Chris D]

Yeah this works:

            <a href="#" class="JsOnly ToggleTrigger" data-target=".ContentToBeHidden">This link unhides the below content.</a>

            <div class="ContentToBeHidden">
                Content to be hidden
            </div>

 

[Andy.N]

Yeah this works:

            <a href="#" class="JsOnly ToggleTrigger" data-target=".ContentToBeHidden">This link unhides the below content.</a>

            <div class="ContentToBeHidden">
                Content to be hidden
            </div>

Super. I will test and let you know how it works. Thanks Chris.

 

[Andy.N]

Yeah this works:

            <a href="#" class="JsOnly ToggleTrigger" data-target=".ContentToBeHidden">This link unhides the below content.</a>

            <div class="ContentToBeHidden">
                Content to be hidden
            </div>

Chris,
I just try that and at first page load, it shows the hidden content. Click on the link will hide it.
It's the opposite effect that I need.
I would need it to be always hidden and when you click on the link, it will show the content. Also, would be nice for the text to change to "Hide" after you click to it. Sort of like toggle.

 

[Jeremy]

Change it to:

<div class="ContentToBeHidden" style="display: none;">
CONTENT
</div>

 

[Chris D]

Yeah what Jeremy says. It's a toggle. So it toggles it from hidden to shown.

As well as Jeremy's suggestion, you could also style .ContentToBeHidden to display: none; in CSS, but it doesn't particularly matter