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.

[Stangsta]

No problems here.

/me clicks install

[Stangsta]

ok, I take that back. Whan you do a thread preview, it shows the contents of the spoiler.

[ElForro]

Do you mean the "Hover Preview" from the Treads list? I didn't think of that... If somebody know how to do it... Please say =)

[Stangsta]

Originally Posted by ElForro

Do you mean the "Hover Preview" from the Treads list? I didn't think of that... If somebody know how to do it... Please say =)

Yes, thats exactly it.

[Reeve of shinra]

Very nice spoiler hack!

[ElForro]

Please change the BB Code with this! Now it works great! (except the Preview, Sorry Stangsta, I will try to fix that)

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

The CSS is the same... And with this new code you can post 2, 3, or even more Spoilers on the same post!

Hack Updated with the new code!

[dirtycrow]

excellent! thank you soo much!

[dirtycrow]

Originally Posted by ElForro

Please change the BB Code with this! Now it works great! (except the Preview, Sorry Stangsta, I will try to fix that)
[/B]

can we please have the english verision?

[ElForro]

What do you mean dirtycrow? It's all in english (well, except my posts that are in BAD english).. But the only "English" words that are in the hack are:
- Spoiler
- Show
- Hide

Edit: Sorry dirtycrow... I've just edited my post... It's all in english now... But again, there're only 2 words to change... Sorry!!