1. 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

Discussion in 'Styling and Customization Questions' started by Andy.N, Nov 7, 2013.

  1. Andy.N

    Andy.N Well-Known Member

    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?
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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>
     
    Bob, MattW and Andy.N like this.
  3. Andy.N

    Andy.N Well-Known Member

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

    Andy.N Well-Known Member

    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.
     
  5. Jeremy

    Jeremy XenForo Moderator Staff Member

    Change it to:
    Code:
    <div class="ContentToBeHidden" style="display: none;">
    CONTENT
    </div>
     
    Bob, mistypants and Chris D like this.
  6. Chris D

    Chris D XenForo Developer Staff Member

    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 :)
     
    Bob likes this.

Share This Page