BB Code Enhancements - BBCode - Custom Spoiler

*Update released! In the new code the button will automatically adjust it's width to tightly fit all the text in the title.. You don't have to worry about keeping your title small anymore! enjoy!

If you like this you may also like the image preview spoiler for large images

I have seen spoiler code before but I am not sure if there is any spoiler code 4.0 for a custom spoiler where you can enter the text that appear on the button (ex. Click to view hidden message) and also show what is on the inside...

Here is my code I made:
** There is a known glitch where in the button title if you put the following symbol in the name ' then it will not work... If anyone can fix this please let me know because I have tried.. Other than that, the code works fine!

Enjoy! (Screenshots below)

Title:

Spoiler

BBCode Tag Name:

spoiler

Replacement:

<div>
    <div class="pre-spoiler">
    <input type="button" value="  {option}  " style="font-size:14px;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.value = '{option}';}">
    </div>
    <div>
        <div class="spoiler" style="display: none;"><div style="border: 1px solid ;">{param}</div></div>
    </div>
</div>

Example:

[spoiler=enter your title here]enter your text here[/spoiler]

Description:

Shows and hides text with the click of a button.
(Glitch: In the button title... do not use this symbol ' )

Use Option:

Yes.

Leave everything else default... Let me know what you think..

[Blooded]

I was looking for this thanks

[orange gold]

Glad you like it!!

[Antidepresiv]

Thanks dude! Is it possible to display a custom button for this spoiler, for example, a button with width 150 height 15px ?

[orange gold]

Yes! (: in the replacement code you will see something like 450px etc. Replace that with 150px. Sory I'm on my phone now. I can also make it auto re-size when I get home... Good luck until then (:

[Antidepresiv]

Y i get that, but i meant a custom blank button, so when you click on it, the spoiler text shows.. thanks for you'r reply..

[orange gold]

I do not understand.. Do you mean just a plain button with no text that is that size?

[Antidepresiv]

Y, and when you enter the spoiler title, it shows on that button.. Don't get me wrong, this is rly cute, but i want to add a custom blank button for the spoiler, cuz i have a custom design.. And thank you again

[orange gold]

Where it says:

value="{option}"

Change the text {option} to the custom title you want shown, instead of the one the user enters..

Then later on there is a value that says..

Use {option}? Check no...

Save..

Does this work?

[Antidepresiv]

Dude, sty, but you have miss understod me, i would just like to make a custom button for the spoiler, users can write their own title, but i would make the button, it would be an image, so when they click on that image, the spoiler shows.. Hope i explained it.. And thank you again for you'r help..

Best Regards,
Anti