BB Code Enhancements - [BB Code] Spoiler Tag

PLEASE CLICK ON INSTALL , IF YOU ARE INSTALLING IT , TO RECEIVE MORE UPDATES ON THIS.

This is is Without option code , with option , check posts below

As Many People PMed Me about to upgrade my Spoiler Tag code to vb4 , so I added this ,
The tag is:

[spoiler]Text you want to hide[/spoiler].

Now a guide to add it:


1. Upload the files of the attachment.
2. Log in at Admin Panel
3. Go to Style manager > All Style Options > Edit Models > headinclude.
4. Find:

<script type="text/javascript" src="{vb:stylevar  yuipath}/connection/connection-min.js?v={vb:raw  vboptions.simpleversion}"></script>

After this, add:

<script type="text/javascript" src="clientscript/spoiler.js"></script>

5. Go to the BBCode option and then select to Add a new one.
6. Enter the data:

--- Title: Spoiler
--- Tag Name: spoiler
--- Replacement:

<blockquote class="postcontent restore ">
<div class="bbcode_container">
<div class="bbcode_quote">
<div class="quote_container">
<div class="bbcode_quote_container"></div>
<div class="bbcode_postedby">
<div style="margin: 5px 20px 20px;">
<div class="alt2" style="text-align: right; margin: 0px; padding: 6px;"> 
    <span style="float: left; padding-top: 2px;">	<img src="images/icons/icon-spoiler.png" alt="Spoiler" />
<b>Spoiler: </b></span>
	<input value="Mostrar" style="margin: 0px; padding: 0px; width: 80px; font-size: 10px;" 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 = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" type="button">
</div>

<div style="padding-top: 4px;"> 
	<div class="alt2" style="display:none; margin: 0px; padding: 6px;"> 
		{param}
	</div>
</div>
</div>
</div>
</div>
</div>
</div>
</blockquote>

--- Example: [spoiler=Example]This is a spoiler tag![/spoiler]

--- Description: Tag to hide spoilers.
--- Use Option? NO
--- Bottom image: images/spoiler.gif
--- Remove Tag if Empty? Yes.
--- The other 3 options, set to No.

7 - Click to add and you are done!

It should look like this:



Note : - I have added this as a free source , you are free to edit it and help yourself , but add your modification in here aswel , so that you will help others ,
Users please browse through more posts to see more modification of this mod , please Click Install and Rate the Mod

[dhemitz]

Thanks theFM ........ i will to try...

[Oyabun]

Can you make it slide?

[vicelover]

Any screenshots? Thanks

[Mukashi]

Getting a few errors with this on my test board

If the spoiler is in the format
[spoiler=Example]This is a spoiler tag![/spoiler]
it just shows up as text

If it's in the format
[spoiler]This is a spoiler tag![/spoiler]
it displays fine, but if there are multiple spoilers in the post and you click to open any of them, they only open the first one. Also, if you click the image in the spoiler thing, it opens a new page displaying just that image, rather than opening the spoiler.

[theFM]

Thanks for saying , Fixed the Things ...

Try Now , it was doing alright now

[jeremyricci]

Originally Posted by theFM

Thanks for saying , Fixed the Things ...

Try Now , it was doing alright now

I've tried it as well, and I'm getting the same error. Perhaps I made an installation error? When I have multiple spoiler tags in 1 thread, only the first spoiler tag is revealed when clicked, the others all revert back to the original tag.

Also, would it be possible to make the "Spoiler" text a button to click, rather than selectable text? I suppose I could look into the HTML for that.

[obmob]

This is a nice addon, thanks

[ddaybofb]

Originally Posted by jeremyricci

I've tried it as well, and I'm getting the same error. Perhaps I made an installation error? When I have multiple spoiler tags in 1 thread, only the first spoiler tag is revealed when clicked, the others all revert back to the original tag.

Also, would it be possible to make the "Spoiler" text a button to click, rather than selectable text? I suppose I could look into the HTML for that.

Im having the same problem

[Pangramma]

I've figured out a workaround by other codes found on google...

<blockquote class="postcontent restore ">
<div class="bbcode_container">
<div class="bbcode_quote">
<div class="quote_container">
<div class="bbcode_quote_container"></div>
<div class="bbcode_postedby">
<div style="margin: 5px 20px 20px;">
<div class="alt2" style="text-align: right; margin: 0px; padding: 6px;"> 
    <span style="float: left; padding-top: 2px;">	<img src="images/icons/icon-spoiler.png" alt="Spoiler" />
<b>Spoiler: <i>{option}</i></b></span>
	<input value="Mostrar" style="margin: 0px; padding: 0px; width: 80px; font-size: 10px;" 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 = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" type="button">
</div>

<div style="padding-top: 4px;"> 
	<div class="alt2" style="display:none; margin: 0px; padding: 6px;"> 
		{param}
	</div>
</div>
</div>
</div>
</div>
</div>
</div>
</blockquote>

Notice i'm using the OPTION tag, so be carefull


This will work for those threads with more than one spoiler, avoiding the load of the javascript (so if you do this, remove the code in headinclude)