• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Expandable text on XF pages

Andy.N

Well-known member
#1
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

XenForo developer
Staff member
#2
Yeah this works:

Code:
            <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

Well-known member
#3
Yeah this works:

Code:
            <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

Well-known member
#4
Yeah this works:

Code:
            <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.
 

Chris D

XenForo developer
Staff member
#6
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 :)