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

[Stuart Wright]

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.

 

[Matthew Hawley]

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.

 

[Chris D]

There's no instructions for this as such.

It's done with JavaScript.

This jQuery tutorial is dead simple:

http://papermashup.com/simple-jquery-showhide-div/

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

 

[Stuart Wright]

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]

the css class ToggleTrigger should help you here

 

[Paul B]

You could copy the way the Thread Display Options function is done at the bottom of the thread list: http://xenforo.com/community/forums/styling-and-customization-questions.47/

 

[xf_phantom]

<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]

<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]

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.