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.

[dirtycrow]

i copied the code in post number 7 and now i don't have show and hide but "mostar" and "Ocultar"

[ElForro]

Sorry again... Now it's all in English... (i forgot to change that words because my forum it's in spanish :P)

[dirtycrow]

ElForro, thank you so much! awesome!

[Maryanninva]

Nice! I just installed!

To keep the spoiler out of the hover, I'm advising my users to have at least three lines of text before putting in the spoiler (may it be words, dashes or whatever).

[Snake]

Thanks, I've installed this!

[TPOCJames]

Installed, love it

[GSX-Racing]

Installed, thanks.

Was there ever a way to make it not show in thread preview?

[ElForro]

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

[GSX-Racing]

Yeah, that would be sweet.

I tried just putting a period on the first three lines but that didn't work. I guess you have to put the 150 characters (or whatever thread preview is set to) in order to hid the spoiler info.

[o0Hubba0o]

The problem with previous versions of this is it didn't work if Firefox, does this work with all browsers?