Inline spoiler button (JS)

Screen.PNG
Description
This BBCode is for hiding a part of post's text, displaying button instead, which can be clicked in order to reveal hidden content.

Features:
  • Spoiler button is displaying inline, in the content flow. But when revealed, hidden content is displaying in block.
  • Default button text ('Spoiler') can be customized specifying title as attribute value.
  • Should work in any modern browser.
Compatibility notes:
To use this BBCode along with Markdown extension - additional actions required (see FAQ)
  • Author johnd0e
  • Last updated Mon Sep 07, 2020 4:54 pm
  • Rating
    (0)
  • Categories Layout

Public performance attribution has been waived.

Demo

This is [spoiler=inline]Nested [spoiler]Hidden content[/spoiler] is also supported.[/spoiler] spoiler button.

Settings

BBCode Usage: Select all
[spoiler={INTTEXT;defaultValue=Spoiler}]{TEXT}[/spoiler]

HTML Replacement: Select all
<span class="spoiler-inline-js"><input type="button" value="{INTTEXT}" class="button2" style="font-size:10px; padding: 0px 3px; border-radius: 2px;" onclick="nextSibling.style.display = nextSibling.style.display==='none' ? 'block' : 'none';" /><div style="margin-top: 3px; padding: 5px; border: 1px dotted darkgray; display: none;">{TEXT}</div></span>

Help Line: Select all
Spoiler: [spoiler]text[/spoiler], [spoiler=Title]text[/spoiler]
Screen2.PNG
  • Revisions
    Version
    phpBB Version(s)
  • Inline spoiler button (JS) 1.0.2
    1.0.2
    3.3.x
    Validation time: Sep 07, 2020 4:54 pm

    BBCode Usage: Select all
    [spoiler={INTTEXT;defaultValue=Spoiler}]{TEXT}[/spoiler]

    HTML Replacement: Select all
    <span class="spoiler-inline-js"><input type="button" value="{INTTEXT}" class="button2" style="font-size:10px; padding: 0px 3px; border-radius: 2px;" onclick="nextSibling.style.display = nextSibling.style.display==='none' ? 'block' : 'none';" /><div style="margin-top: 3px; padding: 5px; border: 1px dotted darkgray; display: none;">{TEXT}</div></span>

    Help Line: Select all
    Spoiler: [spoiler]text[/spoiler], [spoiler=Title]text[/spoiler]
  • Inline spoiler button (JS) 1.0.1
    1.0.1
    3.3.x
    Validation time: Feb 21, 2020 2:28 am

    BBCode Usage: Select all
    [spoiler={INTTEXT;defaultValue=Spoiler}]{TEXT}[/spoiler]

    HTML Replacement: Select all
    <span class="spoiler-inline-js"><input type="button" value="{INTTEXT}" class="button2" style="font-size:10px; padding: 0px 3px; border-radius: 2px;" onclick="nextSibling.style.display = nextSibling.style.display==='none' ? 'block' : 'none';" /><span style="margin-top: 3px; padding: 5px; border: 1px dotted darkgray; display: none;">{TEXT}</span></span>

    Help Line: Select all
    Spoiler: [spoiler]text[/spoiler], [spoiler=Title]text[/spoiler]