Spoiler BBCode (auto-created and configurable)

[MarkFL]

Overview:

This add-on, upon installation, auto-creates a new custom spoiler BBCode defining the tags (where the text to be hidden is placed between the tags).

You may set the color of the button, the color of the text on the button, and the border radii of both the button and the element containing the hidden text below the button. The button is animated, in that when it is clicked, it moves down and to the right to give the illusion of being depressed when clicked.

When the text is hidden, the button says "Show" and a tooltip advises the user that clicking it will "Reveal Contents" and when the text is shown, then button then says "Hide" and the tooltip advises the user that clicking it will "Conceal Contents."

If the product is uninstalled, then the BBCode is removed from the database.

Updates:

Version 1.1:


Changed BBCode options to allow smilies in the spoiler.
Added needed scripts where CSS is loaded.


Version 1.2:


Added support for Enhanced View Forum Posts (search results) (https://vborg.vbsupport.ru/showthread.php?t=318407).


Version 1.3:


Template now cached.


Version 1.4:


Added setting for "Additional Button CSS."Added support for "Forum Sideblock - Recent Posts (with BBCodes parsed)".
Added support for Forum Sideblock - Recent Posts (with BBCodes parsed) (https://vborg.vbsupport.ru/showthread.php?t=321920).


Version 1.5:


Added option to mask spoiler content in threadbit previews (forumdisplay and search).


Compatibility:

Tested and working on VB 4.2.x and should work on all 4.x versions of vBulletin.

Backup/Warning:

This product alters your database, however it is always good practice to keep regular backups and you should backup before installing ANY new mod.

As always products are USE AT YOUR OWN RISK. I will try to help if I can but no guarantee is offered or implied.

To Install:


Download and extract the attached .zip file.
Upload the contents of the "upload" folder to your forum's root directory.
In AdminCP go to Plugins & Products -> Manage Products -> Add/Import Product.
Click on "Choose File" and browse to the product .xml file that was packaged in the .zip file.
Click "Import"
You MUST set your settings to enable the mod. Each setting has an explanation of its use.


Support for this product can be found here:


MHB - Spoiler BBCode (auto-created and configurable) (http://mathhelpboards.com/vbulletin-products-61/spoiler-bbcode-auto-created-configurable-21860.html)
TAZ - Spoiler BBCode (auto-created and configurable) (https://theadminzone.com/threads/spoiler-bbcode-auto-created-and-configurable.145147/)

[MarkFL]

Update: version 1.1


Changed BBCode options to allow smilies in the spoiler.
Added needed scripts where CSS is loaded.

[MarkFL]

Update: version 1.2


Added support for .Enhanced View Forum Posts (search results) (https://vborg.vbsupport.ru/showthread.php?t=318407)

[MarkFL]

Update: version 1.3


Template now cached.

[rakhwanna]

Can you make it unclickable until user click thanks from this mod https://vborg.vbsupport.ru/showthread.php?t=231666

and i think it will awesome if added in quick reply too
Thanks

[MarkFL]

Can you make it unclickable until user click thanks from this mod https://vborg.vbsupport.ru/showthread.php?t=231666

Sorry, but the effort required and added complexity would far outweigh the utility of such a feature, especially given how many post thanks systems would have to be supported.

and i think it will awesome if added in quick reply too
Thanks

It (the parsed BBCode) actually does show up when you post a quick reply...are you asking about adding the toolbar button to the quick editor? If so, please see my product here:

Quick Editor Buttons (https://vborg.vbsupport.ru/showthread.php?t=322109)

With that, you can customize the quick editor's toolbar. :)

[rakhwanna]

Sorry, but the effort required and added complexity would far outweigh the utility of such a feature, especially given how many post thanks systems would have to be supported.



It (the parsed BBCode) actually does show up when you post a quick reply...are you asking about adding the toolbar button to the quick editor? If so, please see my product here:

Quick Editor Buttons (https://vborg.vbsupport.ru/showthread.php?t=322109)

With that, you can customize the quick editor's toolbar. :)

I was Installed but the SP button not show up
(Edited ... I am not set the option, sorry Case Solved )
Ok, Thank you Mark.. :up:

[NoMatt3r]

Works like a charme!

[exportforce]

How can I edit the "SP" to "spoiler" ?

[MarkFL]

How can I edit the "SP" to "spoiler" ?

You can change the "BB Code Tag Name" in the "BB Code Manager." :)

[Outlaw Mantis]

Does this code support a title option? When I had a MyBB forum before I transferred, there was a great spoiler code that allowed It will never happen for example. Then the title option text would appear next to the reveal button and be easy to see.

It made it really handy for seeing what the spoiler is, but with the current spoiler code I'm using (not yours, though yours looks better already) you have no clue about that unless the person types that outside of the code. Which is only a small inconvenience but the option was great on MyBB. Plus, a lot of the old posts before the transfer have broken spoiler code because my current spoiler code doesn't have the option.

[MarkFL]

What you can do is once you install this product, you can edit the BB Code whereby the "Replacement" is:

<div class="spoiler_wrapper"><div class="spoiler_button_wrapper"><input type="button" value="Show" class="spoiler_button" title="Reveal Contents" onclick="var el = this.parentNode.parentNode.getElementsByTagName('d iv')[1].getElementsByTagName('div')[0];if(el.style.visibility == 'hidden')
{el.style.visibility = 'visible'; el.style.maxHeight = 'none'; this.value = 'Hide'; this.title='Conceal Contents';} else {el.style.visibility = 'hidden'; el.style.maxHeight = '0'; this.value='Show'; this.title='Reveal Contents'}"><span style="margin-left: 1em">{option}</span></div><div class="spoiler_text"><div name="spoiler" style="visibility: hidden; overflow: hidden; max-height: 0">{param}</div></div></div>

And set "Use {option}" to "Yes" and save the BB Code.

[Outlaw Mantis]

Thank you, but it isn't working. It just displays what is in-between. And yes, I replaced the replacement, enabled {option} and updated it all to use "spoiler" instead of "sp". I changed the old code to "spoiler2" beforehand. See the screenshot. Where have I gone wrong?

https://vborg.vbsupport.ru/external/2016/08/5.jpg

Thanks.

[MarkFL]

Once you enable the option, then you need to enter in your post something like:

Hidden text.

[Outlaw Mantis]

Is it not possible to have it work with both [spoiler] and [spoiler=text]? If I defined both codes—your suggested update and the original—but both using the "spoiler" as the code name, would this break it? There are hundreds of posts on the board where people have just written [spoiler] alone.

[MarkFL]

Yes, you can define one to use the option and one not to use the option, with both having the same tag name. :)

[MarkFL]

Update - Version 1.4:


Added setting for "Additional Button CSS."Added support for "Forum Sideblock - Recent Posts (with BBCodes parsed)".
Added support for Forum Sideblock - Recent Posts (with BBCodes parsed) (https://vborg.vbsupport.ru/showthread.php?t=321920).

[MarkFL]

Update - Version 1.5:


Added option to mask spoiler content in threadbit previews (forumdisplay and search).