New Posting Features - Spoiler Tag

I have been on this forum for a while and have used different spoiler tags, but the tags didn't sattisfied me. So i made my own spoiler tag.

This is a BB Code tag. It has to be installed in your BB code manager.

Enter the vbulletin administrator panel.
Navigate to Own BB codes.
Go to add BB code and fill in the following items.

Title: Spoiler
Tag: spoiler
Replacement:

<div class="tcat" colspan="3">
	Spoiler
</div>
<div style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;">
	<span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffffff'">
		{param}
	</span>
</div>

Example: [spoiler]blabla[/spoiler]
Description: This items show only the text when you move the mouse over it.

The code and style of it might be made better, but it does what it is made for.

I use this on the latest version of vBulletin (3.7.0) but it works on all versions.

I hope this is usefull for you guys. If you used it please click install so i can see if it comes in handy.

For those of you who want an example, here is it: Live Demo (dutch forum)
The first spoiler tag is my own tag, the second is this one: Invision Board Styled Spoiler Tag

And excuse me for my English, didn't used it much the last time.

[YdieresiS]

Reserved

[Boofo]

A text file would be nice to be able to refer back to in case it is needed to be re-installed again.

[YdieresiS]

I added a text file with the text for the BB code in it.

[Boofo]

Thank you, sir.

Is there a way to make the whole box mouse over instead of just the part with the test in it? If you have this one a wide skin the box goes all the way across the screen. Can the box either be short ended or the whole box reacts to the mouse over? Does that make any sense at all?

[Freesteyelz]

Did you try setting the onmouseover in the div tag?

[Boofo]

No, but you know me, I'd screw it up somehow. Can you show me, sir?

[Freesteyelz]

I could if I had installed the mod.

Anyway, replace the code with:

<div class="tcat" colspan="3">
 Spoiler
</div>
<div style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;cursor:pointer">
 <div class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffffff'">
  {param}
 </div>
</div>

I added the cursor hand when hovering over the div.

[Boofo]

That worked perfect, sir, thank you.

Now, is there any way to make the box only as long (or a little longer) as the text is instead of across the whole page? LOL

[Freesteyelz]

There are two versions.

1st version:

The code below will show the Spoiler title at the top of the spoiler text.

<div style="margin:10px 0">
<div style="margin-bottom:7px"><span style="padding:3px" class="tcat">
Spoiler</span></div>
<div>
<span style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;cursor:pointer">
 <span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffffff'">
  {param}
 </span>
</span>
</div>
</div>

*Please note this is only an edit of YdieresiS' mod. All credit goes to him.