- Description
-
Warning: this BBCode works fine on phpBB 3.2.6-3.3.4 but stopped working from phpBB 3.3.5 as the <style> element is not allowed any more in the BBCodes HTML Replacement code (cf. JoshyPHP's comment)!
At the moment there's no solution for this BBCode (as I can't recommand to manually modify phpBB core files to add this BBCode CSS ; and I've made a suggestion to the phpBB team but it will take time to "maybe" (not sure at all) be approved and implemented). On phpBB 3.3.5+, you can use the new version of Spoiler Plus (JS) instead (version 1.1.0).
Sorry for the inconvenience, for those who didn't want to use Javascript.
---------------------------
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 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.11) & phpBB 3.3.0-3.3.4
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! - Optional custom title (
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]
-