Spoiler Plus (JS)

Spoiler.gif
Description
This BBCode allows to hide by default part of the text of a post.
The hidden text can then be revealed by clicking on the title describing its content.

This version of the Spoiler BBCode is full features:
  • Optional custom title ([spoiler=hidden text title]hidden text[/spoiler] or [spoiler]hidden text[/spoiler])
  • Neat style by default (no imposed button, title, frames, etc.)
  • Customizable icons (open and close) via Font Awesome v4.7 icon Unicode codes (cf. FAQ)
  • Customizable "Display" and "Collapse view" default titles (cf. FAQ)
  • Easily customizable style via CSS (cf. FAQ)
  • No hard coded language string
  • No translation required (uses core language strings)
  • Full Unicode support
  • Do not require to install an extension
  • Works with phpBB 3.2.6+ (incl. 3.2.11) & phpBB 3.3.0+ (incl. 3.3.7)
Limitation
As this BBCode uses JavaScript to update icon & title every time you click to show or hide the text, for security reasons the title content is limited to Unicode letter characters, numbers, spaces, commas, dots, minus, plus, hyphen, underscore and whitespaces (but no apostrophe for example). If you want to be able to use any character in the title, please use the Spoiler Plus (no JS) version.

No JavaScript version
This BBCode using JavaScript has been released to maintain the compatibility with Internet Explorer and EdgeHTML (the old version of Microsoft Edge).
However, if you consider this compatibility not important any more as those 2 browsers are now outdated (end of support of Windows 7 on Jan. 14th 2020, replacement of EdgeHTML by Edge Chromium on Jan. 15th 2020 on Windows 10) and they have a low, decreasing, combined market share already (around 5%), I advise you to move to the Spoiler Plus (no JS) version. This version is strictly similar to this one, its behaviour, features (you can even use any character in titles) and design are the same, but do not use JavaScript and then avoid all the risks that go with it.

Special thanks to JoshyPHP, 3Di and mrgoldy for their advises!
  • Author -=ET=-
  • Last updated Fri May 27, 2022 10:30 pm
  • Rating
    (0)
  • Categories Layout

Public performance attribution has been waived.

Demo

[spoiler=My custom title]My hidden text...[/spoiler]
[spoiler]My hidden text...[/spoiler]

Settings

BBCode Usage: Select all
[spoiler={INTTEXT?}]{TEXT}[/spoiler]

HTML Replacement: Select all
<div> <div> <xsl:choose> <xsl:when test="@spoiler"> <button type="button" style="outline:0 !important" onclick="var t=parentNode.nextElementSibling.style,o=firstElementChild.style,c=lastElementChild.style;o.display=t.display;t.display=c.display=(o.display)?'':'none';return!1"> <span><i class="icon fa-plus-circle" style="font-size: 13px; padding-left:1px;" aria-hidden="true"></i><span style="font-weight:bold; padding-left:3px;">{INTTEXT}</span></span> <span style="display:none"><i class="icon fa-minus-circle" style="font-size: 13px; padding-left:1px;" aria-hidden="true"></i><span style="font-weight:bold; padding-left:3px;">{INTTEXT}</span></span> </button> </xsl:when> <xsl:otherwise> <button type="button" style="outline:0 !important" onclick="var t=parentNode.nextElementSibling.style,o=firstElementChild.style,c=lastElementChild.style;o.display=t.display;t.display=c.display=(o.display)?'':'none';return!1"> <span><i class="icon fa-plus-circle" style="font-size: 13px; padding-left:1px;" aria-hidden="true"></i><span style="font-weight:bold; padding-left:3px;">{L_DISPLAY}</span></span> <span style="display:none"><i class="icon fa-minus-circle" style="font-size: 13px; padding-left:1px;" aria-hidden="true"></i><span style="font-weight:bold; padding-left:3px;">{L_COLLAPSE_VIEW}</span></span> </button> </xsl:otherwise> </xsl:choose> </div> <div style="display:none; margin-top:3px; margin-bottom:15px; margin-left:15px;">{TEXT}</div> </div>

Help Line: Select all
Hidden text: [spoiler=hidden text title]hidden text[/spoiler] or [spoiler]hidden text[/spoiler]
  • Revisions
    Version
    phpBB Version(s)
  • Spoiler Plus (JS) 1.1.0
    1.1.0
    3.3.x
    Validation time: May 27, 2022 10:30 pm

    BBCode Usage: Select all
    [spoiler={INTTEXT?}]{TEXT}[/spoiler]

    HTML Replacement: Select all
    <div> <div> <xsl:choose> <xsl:when test="@spoiler"> <button type="button" style="outline:0 !important" onclick="var t=parentNode.nextElementSibling.style,o=firstElementChild.style,c=lastElementChild.style;o.display=t.display;t.display=c.display=(o.display)?'':'none';return!1"> <span><i class="icon fa-plus-circle" style="font-size: 13px; padding-left:1px;" aria-hidden="true"></i><span style="font-weight:bold; padding-left:3px;">{INTTEXT}</span></span> <span style="display:none"><i class="icon fa-minus-circle" style="font-size: 13px; padding-left:1px;" aria-hidden="true"></i><span style="font-weight:bold; padding-left:3px;">{INTTEXT}</span></span> </button> </xsl:when> <xsl:otherwise> <button type="button" style="outline:0 !important" onclick="var t=parentNode.nextElementSibling.style,o=firstElementChild.style,c=lastElementChild.style;o.display=t.display;t.display=c.display=(o.display)?'':'none';return!1"> <span><i class="icon fa-plus-circle" style="font-size: 13px; padding-left:1px;" aria-hidden="true"></i><span style="font-weight:bold; padding-left:3px;">{L_DISPLAY}</span></span> <span style="display:none"><i class="icon fa-minus-circle" style="font-size: 13px; padding-left:1px;" aria-hidden="true"></i><span style="font-weight:bold; padding-left:3px;">{L_COLLAPSE_VIEW}</span></span> </button> </xsl:otherwise> </xsl:choose> </div> <div style="display:none; margin-top:3px; margin-bottom:15px; margin-left:15px;">{TEXT}</div> </div>

    Help Line: Select all
    Hidden text: [spoiler=hidden text title]hidden text[/spoiler] or [spoiler]hidden text[/spoiler]
  • Spoiler Plus (JS) 1.0.2
    1.0.2
    3.3.x
    Validation time: Jan 09, 2020 4:00 am

    BBCode Usage: Select all
    [spoiler={INTTEXT?}]{TEXT}[/spoiler]

    HTML Replacement: Select all
    <style> button { outline: 0 !important; } div .sbbctitletext { font-weight:bold; padding-left:5px; } div .sbbctitleopen::before { float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f055"; } div .sbbctitleclose::before { float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f056"; } div .sbbccontent { margin-top:3px; margin-bottom:15px; margin-left:15px; } </style> <div> <div> <xsl:choose> <xsl:when test="@spoiler"> <button type="button" onclick="var t=parentNode.nextElementSibling.style,o=firstElementChild.style,c=lastElementChild.style;o.display=t.display;t.display=c.display=(o.display)?'':'none';return!1"> <span class="sbbctitleopen" aria-hidden="true"><span class="sbbctitletext">{INTTEXT}</span></span> <span class="sbbctitleclose" style="display:none"><span class="sbbctitletext">{INTTEXT}</span></span> </button> </xsl:when> <xsl:otherwise> <button type="button" onclick="var t=parentNode.nextElementSibling.style,o=firstElementChild.style,c=lastElementChild.style;o.display=t.display;t.display=c.display=(o.display)?'':'none';return!1"> <span class="sbbctitleopen" aria-hidden="true"><span class="sbbctitletext">{L_DISPLAY}</span></span> <span class="sbbctitleclose" style="display:none"><span class="sbbctitletext">{L_COLLAPSE_VIEW}</span></span> </button> </xsl:otherwise> </xsl:choose> </div> <div class="sbbccontent" style="display: none;">{TEXT}</div> </div>

    Help Line: Select all
    Hidden text: [spoiler=hidden text title]hidden text[/spoiler] or [spoiler]hidden text[/spoiler]