Page 1 of 1

inline as opposed to block spoiler tag

Posted: Fri Apr 12, 2019 11:27 am
by CapnZapp
Hello,

I am looking for a bbcode that enables spoilers to be hidden - but not as a paragraph or block, but inline.

Let me illustrate using bold text where I would like hidden text instead (text that's invisible but is revealed by a click):

I have found spoiler tags that work
like this,
creating a paragraph of spoiler text. Also solutions that create a block of text, much like the code tag:

Code: Select all

like this
(but obviously hidden from view until clicked)

What I am looking for is instead a spoiler tag that work like this, that is protecting individual words without disrupting the paragraph.

Image

Thank you in advance.

Re: inline as opposed to block spoiler tag

Posted: Mon Jul 22, 2019 10:05 pm
by Powdered Toast Man
BBCode Usage:

Code: Select all

[inlinespoiler]{TEXT}[/inlinespoiler]


HTML Replacement:

Code: Select all

<span class="inline-hiddentext" onmousedown="if (this.className.match('inline-showtext')) {
    this.className='inline-hiddentext';
}
else {
    this.className='inline-showtext';
}"><xsl:apply-templates /></span>

CSS (adjust to suit):

Code: Select all

.inline-hiddentext {
    background: #000;
    border: 1px solid #c9d2d8;
    color: rgba(100, 100, 100, 0);
    cursor: help;
    display: inline;
    padding: 0 3px;
}


.inline-showtext {
    background: #fff;
    border: 1px solid #c9d2d8;
    color: #2e8b57;
    cursor: help;
    display: inline;
    padding: 0 3px;
}