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 Sage Knight

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

Remove :

{option}

from 4.Replacement code
and
7.Use {option} : NO
^__^

[midnightfox]

Worked. I needed a spoiler button. Thanks. Nominated this for MOTM.

[Oren Rozenbaum]

i don't understand you.

you wrote:

. In admin cp : Styles & Templates => Style Manager => All Style option
at the bottom of the page : " Additional CSS Definitions "
Second window ( bottom) add this code :
*******************************
.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;
}

now, i am not find this.
are you can to help me?

by the way, nice mode.
very active

[duditas]

Be carefull with this:

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

Everybody is using your bandwidthd.



I do not understand either

13. In admin cp : Styles & Templates => Style Manager => All Style option 
at the bottom of the page : "  Additional CSS Definitions " 
Second window ( bottom)  add this code :

Where have I to paste the code? Is it necessary? It seems to work fine without it

Thanks in advance

[Gun Geek]

Originally Posted by duditas

Be carefull with this:

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

Everybody is using your bandwidthd.



I do not understand either

13. In admin cp : Styles & Templates => Style Manager => All Style option 
at the bottom of the page : "  Additional CSS Definitions " 
Second window ( bottom)  add this code :

Where have I to paste the code? Is it necessary? It seems to work fine without it

Thanks in advance

Originally Posted by Oren Rozenbaum

i don't understand you.

you wrote:



now, i am not find this.
are you can to help me?

by the way, nice mode.
very active

I dont know which version the instructions were written for but there is no area like this.

Go to Admin Control Panel ---> Style Manager --> Edit Templates

Once you click on that, in the left box double click on "CSS Templates" you will see a css file named "additional.css" click on that, the file was empty when i did it. Paste in your code and save.

[ricardoNJ]

vb 3.8.4 Installed, thanks!

[Golzarion]

Where have I to paste the code? Is it necessary? It seems to work fine without it

That instruction was for 3.7.x and 3.8.x versions ....
for vb 4.x version just follow the instruction on the first post .

vb 3.8.4 Installed, thanks!

Yes , it works perfect on vb3 and also vb 4.x versions .

/
You are welcome ^_^

[midnightfox]

This modification stopped displaying any content posted in it. What's up with it? Please help.

[Golzarion]

Originally Posted by midnightfox

This modification stopped displaying any content posted in it. What's up with it? Please help.

It works perfect ! see demo please : http://forum.golzarion.com/showthread.php?t=183
Maybe your browser cache causes the problem .. Please delete all the cache and cookies of your web browser and then try it again ...
If not , please visit this link : https://vborg.vbsupport.ru/showpost....5&postcount=61