Spoiler Plus (no 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 use JavaScript to avoid all risks that go with it
  • Do not require to install an extension
  • Works with phpBB 3.2.6+ (incl. 3.2.9) & phpBB 3.3.0
Browser compatibility
The BBCode is not compliant with Internet Explorer and EdgeHTML (but is compliant with Edge Chromium that replaced EdgeHTML on January 15th 2020)
If you need this Spoiler BBCode with Internet Explorer and EdgeHTML support, please use the Spoiler Plus (JS) BBCode.

Special thanks for JoshyPHP, 3Di and mrgoldy for their advises!
  • Author -=ET=-
  • Last updated Sun Jan 12, 2020 11:21 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={TEXT1?}]{TEXT2}[/spoiler]

HTML Replacement: Select all
<style> summary { user-select: none; outline: 0 !important; } summary .bbctitle { font-weight:bold; padding-left:5px; cursor: pointer; } summary::-webkit-details-marker { display: none } summary::before{ float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f055"; cursor: pointer; } details[open] summary::before{ content: "\f056"; } details.bbcspoiler[open] summary::after { content: attr(title-open); font-weight:bold; cursor: pointer; } details.bbcspoiler:not([open]) summary::after { content: attr(title-close); font-weight:bold; cursor: pointer; } details .bbccontent { margin-top:3px; margin-bottom:15px; margin-left:15px; } </style> <details class="bbcspoiler"> <xsl:choose> <xsl:when test="@spoiler"> <summary><span class="bbctitle">{TEXT1}</span></summary> </xsl:when> <xsl:otherwise> <summary title-open="{L_COLLAPSE_VIEW}" title-close="{L_DISPLAY}"><span class="bbctitle"></span></summary> </xsl:otherwise> </xsl:choose> <div class="bbccontent">{TEXT2}</div> </details>

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 (no JS) 1.0.1
    1.0.1
    3.3.x
    Validation time: Jan 12, 2020 11:21 pm

    BBCode Usage: Select all
    [spoiler={TEXT1?}]{TEXT2}[/spoiler]

    HTML Replacement: Select all
    <style> summary { user-select: none; outline: 0 !important; } summary .bbctitle { font-weight:bold; padding-left:5px; cursor: pointer; } summary::-webkit-details-marker { display: none } summary::before{ float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f055"; cursor: pointer; } details[open] summary::before{ content: "\f056"; } details.bbcspoiler[open] summary::after { content: attr(title-open); font-weight:bold; cursor: pointer; } details.bbcspoiler:not([open]) summary::after { content: attr(title-close); font-weight:bold; cursor: pointer; } details .bbccontent { margin-top:3px; margin-bottom:15px; margin-left:15px; } </style> <details class="bbcspoiler"> <xsl:choose> <xsl:when test="@spoiler"> <summary><span class="bbctitle">{TEXT1}</span></summary> </xsl:when> <xsl:otherwise> <summary title-open="{L_COLLAPSE_VIEW}" title-close="{L_DISPLAY}"><span class="bbctitle"></span></summary> </xsl:otherwise> </xsl:choose> <div class="bbccontent">{TEXT2}</div> </details>

    Help Line: Select all
    Hidden text: [spoiler=hidden text title]hidden text[/spoiler] or [spoiler]hidden text[/spoiler]
  • Spoiler Plus (no JS) 1.0.0
    1.0.0
    3.2.x
    Validation time: Jan 05, 2020 1:26 am

    BBCode Usage: Select all
    [spoiler={TEXT1?}]{TEXT2}[/spoiler]

    HTML Replacement: Select all
    <style> summary { user-select: none; } summary .bbctitle { font-weight:bold; padding-left:5px; cursor: pointer; } summary::-webkit-details-marker { display: none } summary::before{ float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f055"; cursor: pointer; } details[open] summary::before{ content: "\f056"; } details.bbcspoiler[open] summary::after { content: attr(title-open); font-weight:bold; cursor: pointer; } details.bbcspoiler:not([open]) summary::after { content: attr(title-close); font-weight:bold; cursor: pointer; } details .bbccontent { margin-top:3px; margin-bottom:15px; margin-left:15px; } </style> <details class="bbcspoiler"> <xsl:choose> <xsl:when test="@spoiler"> <summary><span class="bbctitle">{TEXT1}</span></summary> </xsl:when> <xsl:otherwise> <summary title-open="{L_COLLAPSE_VIEW}" title-close="{L_DISPLAY}"><span class="bbctitle"></span></summary> </xsl:otherwise> </xsl:choose> <div class="bbccontent">{TEXT2}</div> </details>

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