Spoiler Tag : Show/Hide

[ElForro]

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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
</div>
<div>
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div>
Example: test
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]

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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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! :D

Hack Updated with the new code!

[dirtycrow]

excellent! thank you soo much!

[dirtycrow]

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

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

[ElForro]

This is my first mod, no previous versions...

This works with (tested)...

MAC:
- Safari
- Firefox
- Opera
- Camino

Windows:
- Firefox
- Internet Explorer
- Opera

[G_Man]

looking good. thanks.

[Station]

As I run a board that centers around anime and games, this was essential to not spoil major details.

Great mod. *clicks install*

[DaPro]

For those of us too lazy to make a button, here is one. It's nothing pretty, just something for you to use, maybe I will make a better one later :-)

[thisgeek]

I've spent quite a bit of time mucking around, and I've come up with the following changes.

I've embedded the CSS within the replacement, so you don't need to go muck around with your styles.

I've also modified the CSS to be a bit more generic - and I've fixed it so that the spoiler doesn't stretch across the entire post. It is as big as the text between the tags.


<table><tr><td>
<div>
<div 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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
</div>
<div>
<div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>
</div>
</div>
</td></tr></table>


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('s pan')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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>


See this post (http://www.wargeeks.org/showpost.php?p=10549&postcount=1) if you want to see a sample of how it looks.

EDIT: I've cleaned up the code a bit - the toggle should now work in Safari.

[GSX-Racing]

I've spent quite a bit of time mucking around, and I've come up with the following changes.

I've embedded the CSS within the replacement, so you don't need to go muck around with your styles.

I've also modified the CSS to be a bit more generic - and I've fixed it so that the spoiler doesn't stretch across the entire post. It is as big as the text between the tags.


<table><tr><td>
<div>
<div style="margin-bottom: 5px; font-weight: bold; color: #000000;">
<input type="button" value="Show Spoiler" 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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
</div>
<div>
<div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>
</div>
</div>
</td></tr></table>


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

<span>
<span style="margin-bottom: 5px; font-weight: bold; color: #000000;">
<input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(' span')[1].getElementsByTagName('span')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('s pan')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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>


See this post (http://www.wargeeks.org/showpost.php?p=10549&postcount=1) if you want to see a sample of how it looks.


Where do these codes get put? In the BBCode?

[thisgeek]

Yeah, it goes in the 'replacement' field.

[Tralala]

I've spent quite a bit of time mucking around, and I've come up with the following changes.
...

See this post (http://www.wargeeks.org/showpost.php?p=10549&postcount=1) if you want to see a sample of how it looks.


Wow, this is really nice! I appreciate you sharing. I especially like the one that can be used "inline." However, the dashed lines make it a bit hard to read.

Previously I was using this:

<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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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>

Is there any way to combine the look of both? That is, use your inline version one, but with the recessed/line look (instead of the dashed-border?)

That would be great.

[sandra_nz]

Thanks for this, it looks great!

[thisgeek]

Wow, this is really nice! I appreciate you sharing. I especially like the one that can be used "inline." However, the dashed lines make it a bit hard to read.

Previously I was using this:

<snip>

Is there any way to combine the look of both? That is, use your inline version one, but with the recessed/line look (instead of the dashed-border?)

That would be great.

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

[Tralala]

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:

http://homepage.mac.com/joshr/trl/spoiler.jpg

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('s pan')[1].getElementsByTagName('span')[0].style.color = '#FF0000'; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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]

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]

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]

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('s pan')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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]

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('s pan')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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 :D

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.

[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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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]

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('s pan')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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. :D

[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 text in here .

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

[joh]

will this work with 3.6.2?

[Snake]

Yup, I'm running it on my forums already.

[dutchbb]

Great mod. How can I prevent users from parsing them in their signatures please?

[Diva]

Yes! Thank you for this.

[big dan]

installed on 3.6.2.. Instead of spoiler I called it hidden text and used hide as tags :)

Thanks!

[Dream]

great job

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

no you can't :)

[drdeathuk69]

can you add this into the posting toolbar?

[drdeathuk69]

i think it would a great idea to add it into the toolbox make life easier

[drdeathuk69]

bump

[Diva]

can you add this into the posting toolbar?

First, make a button. Then go to your BB code for the spoiler, hit edit and scroll down to the part were it says "Button (optional)". That's where you put the path to the picture. ;)

[drdeathuk69]

This is my code........

<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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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>

my pic is attached so how do i add that to the posting part?

[drdeathuk69]

its ok i have sorted it

thanks

[PoetJA-1975]

Thanx!

Jacquii.

[Tanabe]

This is my code........

<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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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>

my pic is attached so how do i add that to the posting part?


Thanks man I was wondering how to change it just like this.

[Spiffware]

i got a conflic with my hide hack they both use {param} it seems that the hide hack doesnt work but the spoiler does its strange

[coolgus]

is there any way to exlude this specific code from using with a signature ?

[faisj]

I've spent quite a bit of time mucking around, and I've come up with the following changes.

I've embedded the CSS within the replacement, so you don't need to go muck around with your styles.

I've also modified the CSS to be a bit more generic - and I've fixed it so that the spoiler doesn't stretch across the entire post. It is as big as the text between the tags.


<table><tr><td>
<div>
<div 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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
</div>
<div>
<div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>
</div>
</div>
</td></tr></table>


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('s pan')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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>


See this post (http://www.wargeeks.org/showpost.php?p=10549&postcount=1) if you want to see a sample of how it looks.

EDIT: I've cleaned up the code a bit - the toggle should now work in Safari.

Thanks it works great example:

http://www.twentyfourforum.com/showthread.php?p=21994

also there was no need to change the colours etc.

[Tralala]

Thanks it works great example:

http://www.twentyfourforum.com/showthread.php?p=21994

also there was no need to change the colours etc.

Just FYI, your "show spoiler" button doesn't toggle back properly in Safari (Mac OS X.) Click it once and the text is revealed, but the button doesn't work, to toggle it back.

[Mithrus]

I was wondering if someone could help me get a background color added to this code:

<table><tr><td>
<div>
<div 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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
</div>
<div>
<div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>
</div>
</div>
</td></tr></table>

It was posted earlier in this thread and it works great. I would like it to look like a quote, with the background being a slightly different color and the borders the way a quote is too.

[adc-arab]

awesome installed :D i'd like to make the show button in the middle i tried alot but i couldn't when u use align="center" it works but the button is frozen and it didn't work any help ^^

[GrendelKhan{TSU]

installed thanks!!


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('s pan')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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>


even better! :D thank you as well. :)

[koxito]

Mannn.. this is awasome!! XD

[Mr.Danko Jones]

Is there a spoiler mod for v3.6.x?

I have the latest v3.6.8. Thanks!:)

[John3971]

how can i changes the show / hide to a text link instead of a button??

[GreysAnatomy]

I've spent quite a bit of time mucking around, and I've come up with the following changes.

I've embedded the CSS within the replacement, so you don't need to go muck around with your styles.

I've also modified the CSS to be a bit more generic - and I've fixed it so that the spoiler doesn't stretch across the entire post. It is as big as the text between the tags.


<table><tr><td>
<div>
<div 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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">
</div>
<div>
<div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>
</div>
</div>
</td></tr></table>


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('s pan')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('s pan')[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>


See this post (http://www.wargeeks.org/showpost.php?p=10549&postcount=1) if you want to see a sample of how it looks.

EDIT: I've cleaned up the code a bit - the toggle should now work in Safari.

You are a genius! I've just installed it on my 3.6.8 Patch Level 2 and it seems to work perfectly fine! Thank you!

[chudz]

I am using this code:

<div>
<div class="pre-spoiler">
<span style="float:left; padding-top: 2px;">{option}</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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
</div>
<div>
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div>

and I am using the {option} for entering a title to the spoiler I have enter the CSS given on first post into the addittional CSS in my template. BUT when I post something with two spoiler in it example

link

link

I get this troublesome bug:

https://vborg.vbsupport.ru/

https://vborg.vbsupport.ru/

[DieselMinded]

Links dont hyper link

[dutchbb]

How can I prevent the content of the spoiler from showing in thread preview when hovering over thread titles in forumdisplay?

[Arrogant-One]

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.

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

[azn_romeo_4u]

just press enter. and add a new line and paste it in. don't worry it's css, won't ruin your board.

I tested this out on 3.68 pl2 works amazing.

[mikkitine]

Excellent spoiler tag. The best.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?

AOYou 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 my text 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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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('d iv')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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?

[students_forum]

this won't work on firefox 3 :s

[Magnumutz]

It DOES work on FF3.

[Keesa]

Can anyone tell me if when they use this one, it allows the smilies to show?

In the one I am using, it does not recognize smilies and just leaves the code like :smili:

[dimitrisvb]

I've got a spoiler tag button installed and I thought it was this one, eventhough I realize now that the thread is extremely outdated and the mod not supported, anymore.

Anyway, what can I do but ask here... I’ve updated to vb 4.1.12, lately, and all of the sudden the button disappeared from the editor. Any ideas as to why this happened?