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

Do I have to provide a tag line?

  1. Liam W
    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


    <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';
        <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>
    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
    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 :D

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