• 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?

Stuart Wright

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

Stuart Wright

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

xf_phantom

Well-known member
#7
Code:
<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
         </div>
       </div>
 

Stuart Wright

Well-known member
#8
Code:
<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
         </div>
       </div>
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.
 

Chris D

XenForo developer
Staff member
#9
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.