BB Code Enhancements - Spoiler BB code [Animation version]

I was always looking for something interesting or funny about spoiler tag !
One day I found a fantastic animation gif File for this BBcode !
And create my own codes and the idea of Animation Spoiler tag came true !

As I see this Re_usable code ... I think I can share it easily ! Although I creat and used different code and pictures !

can see demos :

Demo 1 : http://forum.golzarion.com/showthread.php?t=183

*************
Install :

1. In admin control panel : Custom BB Codes => Add New BB Code
2.Title : Spoiler
3.BB Code Tag Name : spoiler
4.Replacement :

<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px; width:852; height:26"><right><font color="red"><b>&nbsp;</b></font></right>  
  <span lang="fa">
  <img border="0" src="http://forum.golzarion.com/u%20Pictures/spoiler2.gif" width="21" height="20">
  <b>Spoiler</b>: {option}&nbsp;</span><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>

5.Example : [spoiler]This text is Animation Spoiler[/spoiler]
6.Description : The [spoiler] tag allows you to hidden or hide your text.
7.Use {option} : NO
8. Button Image (Optional) ==>> upload this picture on you sever and enter the exact address of it .
9. Remove Tag If Empty : Yes
10. Disable BB Code Within This BB Code : No
11.Disable Smilies Within This BB Code : No
12.Disable Word Wrapping Within This BB Code : No
***

I recommend that download the attached file . and read the full instruction and upload the Pictures ( gif files ) on your server!

** Please not to forget to click INSTALL . Thanks. **

http://forum.golzarion.com
.
************
see also this post for the spoiler with golden border ( if you like )

* update : missed </div> was added and it works properly on all browsers version.

[Golzarion]

Originally Posted by Leothefox

hey your demo dont work :S

please, fix it !

It works !! Please visit the link : Demo : http://forum.golzarion.com/showthread.php?t=183

You can also see these screenshots :

Attachment 122997Attachment 122998

[barakuda]

installed + 5 star thanks

[FReeSTER]

Working great here 4.0.8 pl2 and with out adding the CSS code in the CCS Templates=> additional.css since it dont make any difference and not even change the color.

Any ideas where exactly the code will go?

.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;
}

is that code actually goes in the additional.css ?

[Deirdre]

Works on 4.1.1

I'd update your description though on making it work for 4.1.1 with what Gorman said.

[Golzarion]

Originally Posted by Deirdre

Works on 4.1.1

I'd update your description though on making it work for 4.1.1 with what Gorman said.

Set the {option} to "NO" :

7.Use {option} : NO

It works perfect on all 4.x.x versions ,too.

[Sworm]

In my 3.8.7 is showed a 1 "{option}" more

How fix?
Attachment 128706

Edit:
Removing the {option} for the replacements code, it works.... i like this BBcode, thank you. But removing that part will be some problem in the forum?

Thanks

[Afsoul]

Nice one. This work on vB 4.x.x too.
Thx for the Spoiler BB Code. I think I will use it with some modification and translate it to my country language

INSTALLED

[Crotan]

took out

<img border="0" src="http://www.golzarion.com/forum/u%20Pictures/spoiler2.gif" width="21" height="20">

Other than that looks great and works! Thanks

[Sworm]

This bbcode have some little problem with chrome.... when with chrome is clicked "show" , after the "hide" button is not showed, it remain "show"..... With IE and FF works great

[Sage Knight]

How can we keep the "Option" invisible if someone only uses the standard tags [spoiler] and not [spoiler=Example]