Mini Mods - Better Spoiler bb code

Hello, i had to post this for a friend,
Enjoy it.


Code made by ilT

My site:
http://somewhereyoubelong.com

No Title
Title: Spoiler (No Title)
Tag: spoil
Replacement:

<div id="spoiler"><div><input type="button" value="Show Spoiler!" style="width:100px;font-size:12px;margin:10px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" />
<div id="show" style="background-image:url(http://img37.picoodle.com/img/img37/5/11/7/f_backgroundm_872c796.png); display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">
{param}</div>
<div id="hide"></div></div></div>

Example: [spoil]Some text[/spoil]
Use Option: No

With Title
Title: Spoiler (With Title)
Tag: spoil
Replacement:

<div id="spoiler"><div><font size="4">{option}</font><input type="button" value="Show Spoiler!" style="width:100px;font-size:12px;margin-left:10px;margin-bottom:3px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" />
<div id="show" style="background-image:url(http://img37.picoodle.com/img/img37/5/11/7/f_backgroundm_872c796.png); display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">
{param}</div>
<div id="hide"></div></div></div>

Example: [spoil=Title Text]Some Text[/spoil]
Use Option: Yes

Screenshot

[SamuraiNigel]

So, this looks like something I want, but I don't know what to do with the code. Do I throw this into a template? Which one? Do I replace what's in the template or add to it? There aren't any instructions here that i can see...

Edit: Nevermind, I figured it out.

[superthang]

Originally Posted by techgsmnet

you about backgrount picture?
Just change picture link to you.

no, i mean like can we supply each with different image so user can click on that image and it show something related to that image

example
[spoiler=http://vbulletin.com/car.gif]content content content about car[/spoiler]

[spoiler=http://vbulletin.com/boat.gif]content content content about boat[/spoiler]

and so on.

also got this error: style is not "null" or an object

[vasek]

added custom title on button:
add new BB code:

Title: Spoiler with custom text on button
Tag: spoiler2

<div id="spoiler"><div><input type="button" value="{option}" style="width:160px;font-size:12px;margin:10px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') 
{ 
 this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = '';
 this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none';
 this.innerText = '';
} else 
{ 
 this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; 
 this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = '';
 this.innerText = '';
}" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">
{param}</div>
<div id="hide"></div></div></div>

sample: [spoiler2=text on button]hidden text[/spoiler2]
use option: On

[steve1966]

ok i managed to figure out how to install but when i click on my custom button on the tool bar I a get a pop up same as insert an image

and when i post the what i have inserted into the box i cannot get the hid show to show up
please can someone tell me what i have done wrong

[tintructo]

Originally Posted by steve1966

hi can someone tell me what template to add this code to thanks

or if i have to add this mod code somewhere else please can you give me a an instruction how to install

thanks

AdminCP -> Custom BB Codes -> Add New BB Code

in the title input , put something like "Spoiler"
in the tag input, put something like "spoiler" so you will have the bbcode like this : [spoiler]text[/spoiler]
in the replacement textarea, put the code of the spoiler that you can see on the thread

and that's all

[steve1966]

its ok i have sorted it now and got it working

[mikkitine]

Multiple spoiler tags won't open after the first spoiler tag has been open regardless of whether they were used in the same post or not. This happens on IE/Safari browsers afaik.

[tjsrachel]

Originally Posted by vasek

added custom title on button:
add new BB code:

Title: Spoiler with custom text on button
Tag: spoiler2

<div id="spoiler"><div><input type="button" value="{option}" style="width:160px;font-size:12px;margin:10px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') 
{ 
 this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = '';
 this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none';
 this.innerText = '';
} else 
{ 
 this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; 
 this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = '';
 this.innerText = '';
}" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">
{param}</div>
<div id="hide"></div></div></div>

sample: [spoiler2=text on button]hidden text[/spoiler2]
use option: On

I am using this one for the custom text on the button but after you press the button the text disappears and does not come back. Anyone have any ideas how I can get the text to stay after selected?

[gibigbig]

works nicely
i customized it for my site

[Coldhands]

Found a bug!


Spoilers can be used to lure people to phishing sites.

Allow me to demonstrate:

If you have spoilers on your forum, post this and click on the spoiler.

PHP Code:

[B]Ohhh Wows! Check this out yous guys!!1[/B]
[spoiler]Okay, now click it and watch [URL="http://www.vbulletin.org.forum.google.com/omgwhatisurpword"][COLOR=Black][spoiler]j/k! :)[/spoiler][/COLOR][/URL][/spoiler] 


Any suggestions on how to fix this lil bug?