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.

[mikkitine]

Excellent spoiler tag. The best.

Originally Posted by Arrogant-One

With my customized skins there is already text in both 'Additional CSS definitions' windows. The windows are not blank and I am hesitant to replace that text with this new text. What should I do?

AO

You don't paste it over any of the additional CSS text. Go to the bottom, start a new line and then paste the CSS text for this spoiler.

[digibluez]

could be better ,but better than nothing. And as i do not have much time to work it out myself, it's good for start.

[RACHR]

hi, the code from you is great..

but i need a modification, i need this Spoiler field to width max 80% from the post.

i have in all threads many tables and all is 80% width.. only this spoiler field is 100%
It does not look good

when i make the [spoiler]my text[/spoiler] in one of my tables, then is this click on "show" not working.

i hope you understand me and my bad english

thank you very much
bye rachr

EDIT: i get the code from the top of this site!

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

[pab]

Thanks, installed hav been looking for this one..

[theforumist]

o_O this beats the traditional one I see hands down. I installed it and I'm loving it.

[SBoards]

thanks... works great in 3.7.2

[trulylowcarb]

I am using it in 3.7.2. as well and LOVING IT! Thanks

Using it for a trivia game posted with polls. I would LOVE IT if someone could tell me how to make it so users are required to vote in the poll before they can use the SHOW button. Not being able to see the answers unless they vote will force more registrations, I think, since I don't alllow guest voting (not to mention prevent cheating by members, LOL!)

[ch_racer]

Here, take this code:

<div>
    <div class="pre-spoiler">
    <span style="float:left; padding-top: 2px;">Spoiler</span> &nbsp;<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>

This one is valid XHTML Code.

[InsaneNutter]

Thanks, this is perfect and still works great in vBulletin 3.7.2 PL1
I was able to modify the CSS to make the colours match our forums theme perfectly :up:

[whitetigergrowl]

How do i add this to the quick reply area?