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 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.9) & phpBB 3.3.0
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 current version of Microsoft Edge that will be replaced on January 15th 2020 by Edge Chromium).
However, if you consider this compatibility not important any more as 1/ those 2 browsers will be outdated soon (end of support of Windows 7 on Jan. 14th 2020 and EdgeHTML replaced by Edge Chromium on Jan. 15th 2020 on Windows 10) and 2/ they already have a low, decreasing, combined market share (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 for JoshyPHP, 3Di and mrgoldy for their advises!
  • Author -=ET=-
  • Last updated Thu Jan 09, 2020 4:00 am
  • 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
<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]
  • Revisions
    Version
    phpBB Version(s)
  • 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]