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

XF 1.2 Creating an expandable area in a page - are there instructions?

Discussion in 'Styling and Customization Questions' started by Stuart Wright, Aug 25, 2013.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    Hello, I checked Brogan's FAQ, but couldn't find anything referring to this.
    I want to create an expanding area in a page node.
    Similar to the Thread Display Options expanding area at the bottom of the thread list.
    I want to replicate the action of the yellow View button half way down this page.
    How do I do this, please?
    Many thanks.
  2. Matthew Hawley

    Matthew Hawley Well-Known Member

    Google some Ajax expand and collapse stuff. Also you could look at the code for the yellow button and try to put it in xenforo.
  3. Chris D

    Chris D XenForo Developer Staff Member

    There's no instructions for this as such.

    It's done with JavaScript.

    This jQuery tutorial is dead simple:


    Note in the tutorial there's a line which tells you to include the jQuery source. Of course you won't need this as XenForo includes this by default.

    EDIT: it's nothing to do with AJAX ;)
  4. Stuart Wright

    Stuart Wright Well-Known Member

    Thanks Chris. I can do it, of course, as I did before. But I'm wanting to know whether there is a standard Xenforo method of doing it which I can reuse for efficiency.
  5. xf_phantom

    xf_phantom Well-Known Member

    the css class ToggleTrigger should help you here:)
  6. Brogan

    Brogan XenForo Moderator Staff Member

  7. xf_phantom

    xf_phantom Well-Known Member

    <div class="ToggleTriggerAnchor">
    <a href="javascript:" class="JsOnly ToggleTrigger" data-target=".details" style="font-size: 11px">show hidden content</a>
         <div class="details" style="display:none">
               hidden content
    Steve F likes this.
  8. Stuart Wright

    Stuart Wright Well-Known Member

    Working perfectly, many thanks.
    I want to make sure that I leave the inefficiency of vBulletin behind, which is why it's important to me to reuse standard code.
    Brogan, could this be a candidate for a FAQ update?
    Thanks all.
    MattW likes this.
  9. Chris D

    Chris D XenForo Developer Staff Member

    That's a good call, xf_phantom.

    I missed that one. But there's plenty of handy little JS things like that.

    When you're inspecting existing XenForo elements generally any class names or id attributes that begin with a capital letter are usually jQuery selectors more than those used for styling so that will often give you hints.

    Nothing inefficient though about a small bit of additional jQuery though should a default function not quite do what you need such as needing a different animation type or speed or something else a bit custom.

    But absolutely these default methods are worth using where appropriate.
    Stuart Wright likes this.

Share This Page