Back to vBulletin 5.x Products & Extensions

Spoiler Alert BB Code - New Look for VB5
Mod Version: 1.00, by BirdOPrey5

vB Version: 5.0.0 Rating: (6 votes - 4.83 average) Installs: 48
Released: 10 Mar 2013 Last Update: Never Downloads: 217
Not Supported Re-usable Code  

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.php/950-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:
Code:
<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.

Download

File Type: %1$s spoiler-alert-bbcode-bop5.xml (2.0 KB, 246 downloads)

Screenshots

Click image for larger version
Name:	spoiler-alert-ss1-closed.jpg
Views:	2342
Size:	21.5 KB
ID:	144098   Click image for larger version
Name:	spoiler-alert-ss2-open.jpg
Views:	2319
Size:	32.2 KB
ID:	144099   Click image for larger version
Name:	spoiler-alert-ss3-vb5.jpg
Views:	2350
Size:	46.4 KB
ID:	144100  

Similar Mods

BB Code Enhancements [BB Code] Spoiler Tag vBulletin 4.x Add-ons
BB Code Enhancements Spoiler BB Code vBulletin 3.7 Add-ons
Mini Mods Better Spoiler bb code vBulletin 3.6 Add-ons

vblts.ru supports vBulletin®, 2022-2024