vb.org Archive - BB Code Enhancements - Custom Title Spoiler Button

I have a Spoiler Tag Feature at my site that allows for a spoiler with a custom button title to be initially seen (great if you want to hint what is hidden inside).

I don't see anything exactly the same here...although some are similar... & have seen many requests for other spoiler ideas, so.... I thought I might share. ;) Please be kind as this is my first shared hack.:o

Update: Spoilers still work in version 4.x.x (including suites). Spoilers may be used as intended, in all Blog posts, forum posts, & published article content (CMS) to hide hints/cheats. I will not support it anywhere else outside of posting areas.

It's real easy. Just log into the AdminCP=>Custom BBCodes=>Add New BB Code

Then do this:

Title: Spoiler
BB Code Tag Name: Spoiler

Replacement:

Code:

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

<input type="button" value="Spoiler about {option}" style="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 = '{option}'; }">

</div>

<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">

<div style="display: none;">

{param}

</div>

</div>

</div>

Example: [spoiler=Title Text]Hidden Text Here[/spoiler]

description: Creates a button that hides/shows spoiler messages.

use {option}: Click "Yes" (Note: some have found they need to set this option to "No" due to personal styling, but in most cases it should be "Yes").

add the path to your "spoiler" icon The image would go in your forums images/editor directory. (Feel free to use the icon I added at the bottom of this post.. just right click on it to download it to your computer)

Remove tag if empty: Click Yes

...leave the rest at "No"

click "save" button & that's it!

>>LIVE EXAMPLE<< (You can test there without signing up, if you want to see how it works, but also not this is the newer "Smooth Version" the "Box Version" can be seen in the screen shots below).

The code will then be: [spoiler="Button Title Here"]Hidden Content Here...[/spoiler]

This also works to nested spoilers as well!

Below there is an icon to use as well. Just add your image of choice to your path... /images/editor directory.

ENJOY! :D

Please Note: if for any reason this spoiler system breaks when converting to 4.0 upgrade. Just to BB Code manager & delete it, go through the process of adding it again, as given above. Doing this will not make you lose any forum content as long as you use the the same code (i.e. if you modified the code I gave you, then you will have to do the same again for it to work as you want). Doing this will force the new version to read the bbcode properly. It also works in CMS, but I personally am not using it right now, as it's not relevant to my site. So let me know if you have any problems, & I'll test.

We have a smooth, "NO BOX" version HERE that also works for all 3X versions.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02141 seconds Memory Usage 1,737KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: