BB Code Enhancements - Spoiler Alert BB Code - New Look for VB5

This is based on an old spoiler code widely available as "Reusable Code" in the VB 3.x days but since removed. It has been updated with new colors, rounded borders, and shadows for new look and fully compatible with VB5.

This is a BB Code to hide content from people who don't want to accidentally see it- usually used for "spoilers" about TV Shows, Movies, or sporting events.

Live Demo: http://www.qapla.com/mods/showthread...-Spoiler-Alert

Closed State:



Open State:



Nested (on VB5):



Tested and working on VB 3.x, 4.x, and 5.x!
Tested and working in Chrome, IE, Opera, and Safari

Note- Because it uses JavaScript you must refresh the page after submitting a post so the JS loads correctly. Other people viewing the post after you will not have any problems.

This BBCode relies on a background image (bop5-alert-bk.png) that must be uploaded to your /images/misc/ folder.



To install download the XML if you have the BBCode XML importer or add a custom BBCode with these settings:

Title: Spoiler Alert
BB Code Tag Name: sa
Replacement:

<div style="margin: 5px 20px 5px 20px;"> 
<div style="margin-bottom:2px; font-size: 80%;">
<strong>Spoiler Alert! </strong><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 style="background: url(images/misc/bop5-alert-bk.png); margin: 0px; padding: 6px; border: 3px groove red; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);">
<div style="display: none;"><div style="background: rgba(255, 255, 255, 0.8); padding: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">{param}</div></div>
</div>
</div>

Example: [sa]Spoiler Example[/sa]
Description: This is a Spoiler BBCode to hide content until someone clicks on it.
Use {Option}: No

Button Image: (Image attached)

Remove Tag if Empty: Yes
All other settings: No


---


Please "Mark as Installed" if you use this.


NOTE: Do not download the .xml fie unless you have the old obscure mod for VB 3.x to allow BBCode Importing via XML. This is NOT a VB Product file and will not import for 99.9% of you. Use the manual instructions instead. I only included the file because there is a rule where every mod thread is technically supposed to have an attached file to download.

[BirdOPrey5]

Reserved.

[WhiskeyOSS]

XML would not load in vb5.0.0

[BirdOPrey5]

You need to have the BBCode XML Importer mod to use the XML fie. It was an old mod released for 3.x. You probably don't have it so just manually enter the code via the instructions in the post.

[Tyran1]

Nice Thanks!!

[fariborz khan]

is it work in responsive style of vb5?

[emendrael]

Hell yeah, nice !

[donnyaz]

no xml to install and the BB Code works great

[online68]

Two quick questions. Does this work with vB5.1.9? Also, can photos/videos also be uploaded to the spoiler section other than just text?

[IggyP]

you know what would be suuuuper coooool?

usergroup or password protection on these...

that possible at all?? like usergroup id in code or something somehow?