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.

[Wayne2k1.com]

This is great

Installed & thanks

[Annapurna]

pre install question:

Is it possible to phrase the replacement-texts, 'Spoiler' and 'Show' and 'Hide' to use it bilingual?

Andreas

[utw-Mephisto]

Edit: never mind

/me installs

[utw-Mephisto]

This one is nice too :

<div style="margin:5px 20px 20px 20px">

<div class="smallfont" style="margin-bottom:2px"><b>Spoiler:</b> 

<input type="button" value="Show" style="width:45px;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.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">{param}</div></div></div>

Looks a bit like fieldset ...

[Doctor Who]

Originally Posted by thisgeek

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>

Is there any way to modify this so that the "Show/Hide" button appears in the top or bottom right hand corner of the post and highlights any instances of spoilers in that post? So:


The next thing I am going to say is a spoiler . . . . . . . blank space . . . . . . and so you know that . . . . . . . blank space . . . . . . is the one that is going to . . . . . . . blank space . . . . . . .

Instead of a button for each of those, can there be one to highlight them all at the same time?

[Fianna]

Step one of the installation is easy, but I keep getting this error:

"An appropriate representation of the requested resource /forums/admincp/css.php could not be found on this server."

I did paste the stuff of step 1 in the lower box. Does anyone know what's going on?

[Muellmann]

it's working fine for me and a useful option to hide sth. from greenies.

[jilly]

I am having a problem with it not cascading down from the main style to the child styles - it;s only showing up in the parent style - any ideas?

[jilly]

also, the css code shows up as being inherited, when I look at the child styles, yet instead of the buttons it shows the code, , like [spoiler] text in here [/spoiler].

[Canis Firebrand]

I must be missing something, or I've done something wrong.

I followed the steps, and I do have a Show Spoiler button. However, when I click on the button, nothing happens.

Okay.. I figured it out. Strange.

In the code, when I cut and pasted it, it looked normal. When I viewed my source code, and compared it to a board where it was working properly, I noticed a difference.
In the javascript part, where it would have the } and then the else {, it was replacing the { with **.

I edited the code to remove a space and retyped the { and }. Now it is working perfect.