inline as opposed to block spoiler tag

Get help developing custom BBCodes or request one.
Post Reply
CapnZapp
Registered User
Posts: 1
Joined: Fri Apr 12, 2019 11:14 am

inline as opposed to block spoiler tag

Post by CapnZapp » Fri Apr 12, 2019 11:27 am

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.

User avatar
Powdered Toast Man
Registered User
Posts: 3
Joined: Sun Jul 21, 2019 10:47 am

Re: inline as opposed to block spoiler tag

Post by Powdered Toast Man » Mon Jul 22, 2019 10:05 pm

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;
}

Post Reply

Return to “Custom BBCode Development and Requests”