[xenForo][BB Codes & Buttons Manager]How to make a Spoiler bbcode

Compatible XenForo Versions::

• 1.0
• 1.1
• 1.2

This is for the 'BB Codes & Buttons Manager' addon available on the xenForo resource manager.

Step 1

Create the following template:

Name: spoiler_bbcode

Content:

HTML:

<script type="text/javascript">
    function spoilOnClick() {
        var showhide = document.getElementById('showhide');
        var spoiler = document.getElementById('spoilcontent');

        if (showhide.value == 'Show') {
            spoiler.style.display = 'block';
            showhide.value = 'Hide';
        }
        else if (showhide.value == 'Hide') {
            spoiler.style.display = 'none';
            showhide.value = 'Show';
        }
    }
</script>
<div>
    <div class="smallfont">
        <p>{xen:raw $options.1} - <input type="Button" class="button primary" value="Show" id="showhide" onclick="spoilOnClick()" /></p>
        <div id="spoiler" style="border-radius: 5px; border: 2px solid; padding: 3px; width: auto;">
            <div id="spoilcontent" style="display: none;">{xen:raw $content}</div>
        </div>
    </div>
</div>

Step 2

Next, go into your BBCode Manager page and create a new BB Code:

BB Code Title: Spoiler
BB Code Description: Allows you to hide text until the user clicks a link.
BB Code Tag: spoiler
Example:

Spoiler: hello

Hidden text...

Check the boxes.

Parser Methods Tab

Number of options: 1
Template Method: Check the enabled box
Template Name: spoiler_bbcode

Configure any other settings you want.

Save it out, and go into the buttons manager and add the new spoiler button.

Test it out

Example: http://www.ingressexperts.com/threads/spoiler-tag.124/