XF 2.0 How to create collapsible DIV block elements in page nodes / templates

[Stuart Wright]

Hello folks,
in Xenforo 1, there is a means to expand and collapse elements in templates.
We do it in our contact page: https://www.avforums.com/pages/contact/
using

<div class="ToggleTriggerAnchor primaryContent"><a href="javascript:" class="JsOnly ToggleTrigger" data-target=".div_class">Some message which is clickable to expand/collapse the block below it</a>
        <div class="div_name">

This doesn't work in Xenforo 2 (surprise, surprise )
Is there something suitable we can use?
Thanks

 

[Chris D]

I can provide a more specific answer if needed, but if you check out this resource by @Steve F it does demonstrate the replacement approach in XF2:

https://xenforo.com/community/resources/collapsible-user-extras.6180/

 

[Steve F]

Here is a good example that is a bit more basic. This is from the template forum_post_thread for polls.

    <xf:if is="$forum.canCreatePoll()">
            <h2 class="block-formSectionHeader">
                <span class="collapseTrigger collapseTrigger--block{{ $forum.draft_thread.poll ? ' is-active' : '' }}" data-xf-click="toggle" data-target="< :up :next">
                    <span class="block-formSectionHeader-aligner">{{ phrase('post_poll') }}</span>
                </span>
            </h2>
            <div class="block-body block-body--collapsible{{ $forum.draft_thread.poll ? ' is-active' : '' }}">
                <xf:macro template="poll_macros" name="add_edit_inputs" arg-draft="{$forum.draft_thread.poll}" />
            </div>
        </xf:if>

 

[Stuart Wright]

I can provide a more specific answer if needed, but if you check out this resource by @Steve F it does demonstrate the replacement approach in XF2:

https://xenforo.com/community/resources/collapsible-user-extras.6180/

Talk about resurrecting a thread. I've only just started looking at fixing this as we're migrating soon.
So I'm struggling because I need nested collapsible elements.
The effect I want to achieve is live in our XF1 installation on a page node type at https://www.avforums.com/pages/contact/
it uses nested collapsible elements and as an example, the code from the last expandable element My enquiry is about the M2N organisation looks like this:

    <div class="ToggleTriggerAnchor primaryContent"><a href="javascript:" class="JsOnly ToggleTrigger" data-target=".c_organisational"> <span style="font-weight: bold;">My enquiry is about the M2N organisation</span></a>
        <div class="c_organisational" style="padding-bottom: 15px; display:none;">
            <div class="ToggleTriggerAnchor primaryContent"> <a href="javascript:" class="JsOnly ToggleTrigger" data-target=".c_m2n"> <span style="font-weight: bold;">Email M2N Limited</span></a>
                <div class="c_m2n" style="padding: 5px 30px 15px; display:none;">Please note that we do not require any SEO or web development work, and any solicitation for business will be deleted unread.<br />
                    Please <a data-overlayoptions="{&quot;fixed&quot;:false}" class="OverlayTrigger" href="contact-us?to=5&subject=I have an enquiry about M2N Limited">click here</a> to send an email to us.</div>
            </div>
            <div style="margin:40px;">
                <p><strong>The contact details below are for enquiries for M2N Limited.</strong> Enquiries not directly for the M2N business (e.g. about how to use the forums), will be directed to <a href="{xen:link 'faq/'}">read the AVForums FAQ</a>.</p>
                <p>Blah blah blah</p>
            </div>
        </div>
    </div>

Chris, what code do I need to put in to make it work in XF2?
Hoping I can do a search and replace type thing as the page is pretty huge.
Thanks

 

[Dnyan]

You can add your div and styling to it.

Example as per @Steve F post.

Live collapse can be seen at https://civil4m.com/help/frequently_asked_questions/

<h2 class="block-formSectionHeader">

                <span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up :next">

                    <span class="block-formSectionHeader-aligner-left">My enquiry is about the M2N organisation</span>

                </span>

            </h2>

            <div class="block-body block-body--collapsible">

             <p><strong>The contact details below are for enquiries for M2N Limited.</strong> Enquiries not directly for the M2N business (e.g. about how to use the forums), will be directed to <a href="{xen:link 'faq/'}">read the AVForums FAQ</a>.</p>

                <p>Blah blah blah</p>



            </div>

 

[Stuart Wright]

You can add your div and styling to it.

Example as per @Steve F post.

Live collapse can be seen at https://civil4m.com/help/frequently_asked_questions/

<h2 class="block-formSectionHeader">

                <span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up :next">

                    <span class="block-formSectionHeader-aligner-left">My enquiry is about the M2N organisation</span>

                </span>

            </h2>

            <div class="block-body block-body--collapsible">

             <p><strong>The contact details below are for enquiries for M2N Limited.</strong> Enquiries not directly for the M2N business (e.g. about how to use the forums), will be directed to <a href="{xen:link 'faq/'}">read the AVForums FAQ</a>.</p>

                <p>Blah blah blah</p>



            </div>

That works great, thanks.
However, I want to style the text so that it has the same colour and mouse-over underscore properties as normal links. (It will help having a more consistent UI).
Is there an existing Xenforo class which makes text into a fake link by making it the standard link colour and mouse over properties?
Or is there a different way of doing this which uses an <a> tag and a javascript call?
I've tried putting an <a> tag round the text, but that disables the trigger.