Spoiler Tag : Show/Hide

A CSS/Javascript based spoiler tag for vB 3.5.x (but I think it must work with earlier versions)
Just follow the instructions below or in the .zip file.

I hope you like my first modification!

Instructions
Step 1.
Copy the following into the additional CSS definitions (Admin CP > Styles & Templates > Style Manager > All Style Options>Additional CSS definitions) and paste it into the lower box.

.pre-spoiler {
    border: 1px solid #B5C0A8;
    margin: 0 15px 5px 15px;
    background: #E3E9DB;
    padding: 3px 5px 3px 5px;
    font-weight: bold;
    text-align: right;
    color: #6A775B;
}
.spoiler {
    background: #E3E9DB;
    margin: 0 15px 15px 15px;
    padding: 5px;
    border: 1px solid #B5C0A8;
}

Step 2.
Now click save and go to the page to add a new BB Code (Admin CP> Custom BB Codes > Add New BB Code) and enter the following:

Title: Spoiler
Tag: spoiler
Replacement:

<div>
    <div class="pre-spoiler">
    <span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Show" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
    </div>
    <div>
        <div class="spoiler" style="display: none;">{param}</div>
    </div>
</div>

Example: [spoiler]test[/spoiler]
Description: Hides text
Use {option}: No
Button Image: Leave empty

Click save and you are done!

Known bugs: You can read the spoiler in the "Thread Preview".

FAQ
Q: I want to change the color that the spoiler tag uses! How?
A: If you know CSS it is all controlled in the CSS definitions.

[Tralala]

Originally Posted by thisgeek

Yes, easily. Just change the style="border: 1px dashed info in the tags to style="border: 1px inset.

Thanks! That gives me a solid line, looking better already.

What I was looking to do however was gain this more subtle "recessed" look... this is what my current spoiler code (pasted above) gives me, but the text can't go inline:



Is something like that possible? The looks of that, but the inline capabilities of yours?

[thisgeek]

I created the following at Tralala's request (I'm not sure if it's quite what he's looking for), but if anyone else is interested, here it is:

<span>
    <span style="margin-bottom: 5px; background-color: #FFFFFF;">
       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value == 'Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.color = '#FF0000'; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.color = '#FFFFFF'; this.value = 'Show Spoiler';}">
    </span>
    <span>
        <span style="padding: 0 3px 0 3px; color: #FFFFFF;">{param}</span>
    </span>
</span>

The idea is that the text area is still there - ie, hitting the 'show' button won't push the text out the way. If you highlight the spoiler, or push the button, you'll see the text - this is sort of a 'best of both worlds' type spoiler tag. You probably will need to fiddle with the #COLOR values to get it to fit into your theme.

[Zelda-King]

It would be better if this was made to use the stylevar commands so people wouldn't need to customise the colours. Some of us have multiple styles.

[Tralala]

Originally Posted by Zelda-King

It would be better if this was made to use the stylevar commands so people wouldn't need to customise the colours. Some of us have multiple styles.

Yah, I noticed that on one of my themes you could still see the spoilerized text a bit... the background is a different shade of white.

[hambil]

Originally Posted by ElForro

GSX-Racing... I really don't know... But if someone does please help here so we can make this a better spoiler tag =)

Check the code for the spoiler in my sig. It works for thread preview. Feel free to learn from it and add to your spoiler, I'm not selfish

[Tralala]

Originally Posted by thisgeek

I've modified this one so that you can use it inline in a paragraph:

<span>
    <span style="margin-bottom: 5px;">
       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
    </span>
    <span>
        <span style="border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>
    </span>
</span>

This is my favorite one. How can we make it so that the spoilerized text is a different color? Like blue, or gray? That'd be wonderful.

[thisgeek]

Originally Posted by Tralala

This is my favorite one. How can we make it so that the spoilerized text is a different color? Like blue, or gray? That'd be wonderful.

Just adding a "Color" statement to the bottom span tag should do it, as demonstrated below:

<span>
    <span style="margin-bottom: 5px;">
       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
    </span>
    <span>
        <span style="color: Blue; border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>
    </span>
</span>

[Tralala]

Excellent, just what the doctor ordered. So simple, yet so elusive (to me.) Thanks again, thisgeek.

[ElForro]

Thank you all! And sorry about the little problems like the CSS and "Preview"... I'm just an amateur... =)

[thisgeek]

Thanks to you for it initially

You can't really do anything about the preview (IMO) since it's controlled by the board. The way around it is to change the amount of characters displayed in the vb option: "Length of Thread Preview Text" located under the "Forum Display Options" group.

Or: The person posting could put their spoiler a bit further in to the post so that it's not snagged into the preview text.