BB Code Enhancements - Most elegant Spoiler-Tag [BB-Code]

This mod is automatically compatible with vB3.6.x, vB3.7.x, vB3.8.x and vB4.x.x

Demo: http://Uniquecrew.net/Spoiler.php
Demo-Mirror: http://hrkleZ.bplaced.net/Files/Spoiler.html (as you can see in the source, images are base64 encoded in the Demo-Mirror)

Installation Instructions:

1. Open your AdminCP Custom BB Codes => Add New BB Code
2. Title: Spoiler
3. BB Code Tag Name: Spoiler
4. Replacement:
   

   <div style="padding: 0px 5px 0px 5px;  border: 1px solid #DF7401; margin-left: 20px; width: 40%"><div align="center" style="text-transform: none; border-bottom: none; display: block; padding: 3px 0px 3px 0px;">
   <span onClick="var spoiler = this.parentNode.parentNode.getElementsByTagName('div')[2];
     if (spoiler.style.display != ''){
       this.parentNode.parentNode.style.width = '80%'
       this.parentNode.style.borderBottom = '1px solid #CCCCCC';
       spoiler.style.display = '';
       this.getElementsByTagName('a')[0].innerHTML = '->Close Spoiler<-';
     }else{
       this.parentNode.parentNode.style.width = '40%'
       this.parentNode.style.borderBottom = 'none';
       spoiler.style.display = 'none';
       this.getElementsByTagName('a')[0].innerHTML = '->Open Spoiler<-';
     }" />
   <a rel="nofollow" href="#" onClick="return false;" style="text-decoration: none;"><b style="font-size: 0.8em;">->Spoiler ?ffnen<-</b></a>
   </span>
   </div>
   <div class="quotecontent">
   <div align="center" style="display: none; padding: 5px 0px 5px 0px;"><br> {param}</div>
   </div>
   </div><br />

5. Example: [SPOILER]Hidden Text Here[/SPOILER]
6. Description: The [SPOILER]-Tag allows you to hidden or hide your text.
7. Use {option}: No
8. Button Image (Optional) => Upload this Picture on you Server and enter the exact Address of it (/images/ is recommended).
9. Remove Tag If Empty: Yes
10. Disable BB Code Within This BB Code: No
11. Disable Smilies Within This BB Code: No
12. Disable Word Wrapping Within This BB Code: No
13. Disable Automatic Link Parsing Within This BB Code: No

After you finished, you can compare your Settings with this Screenshot.


I hope you like it! (:

This mod is automatically compatible with vB3.6.x, vB3.7.x, vB3.8.x and vB4.x.x

[Glockie]

Thank you for the very instructive guide - clearly written and easy to follow.

Superb! Thank you.

[Grazu]

Originally Posted by Amaury25

Thank you.

Also, before opening it when first visiting said thread, it says "->Spoiler ?ffnen<-." However, once you open it, it changes to Close / Open Spoiler. What's offnen?

Is there a way to get it to say Open Spoiler when you first go to said thread?

Edit: Never mind, trying another one.

"?ffnen" means open in german.

[onealien]

works great and has a clean look....thx

[Snakes18]

Apparently on 4.2 you can see the hidden text from Google. Is there a way to prevent this?

[gsmlover4u]

dimo links not working

[Grazu]

Originally Posted by Snakes18

Apparently on 4.2 you can see the hidden text from Google. Is there a way to prevent this?

You could unescape the {param}.

[alzaabi]

How to centre the spoiler ? and how to make the font
inside the spoiler little bigger ?

[ramesh_umk3]

Suppose if any users used align it will not be applicable for bbcode remember that

<center><div style="padding: 0px 5px 0px 5px; border: 1px solid #DF7401; margin-left: 20px; width: 40%"><div align="center" style="text-transform: none; border-bottom: none; display: block; padding: 3px 0px 3px 0px;">
<span onClick="var spoiler = this.parentNode.parentNode.getElementsByTagName('d iv')[2];
if (spoiler.style.display != ''){
this.parentNode.parentNode.style.width = '80%'
this.parentNode.style.borderBottom = '1px solid #CCCCCC';
spoiler.style.display = '';
this.getElementsByTagName('a')[0].innerHTML = '->Close Spoiler<-';
}else{
this.parentNode.parentNode.style.width = '40%'
this.parentNode.style.borderBottom = 'none';
spoiler.style.display = 'none';
this.getElementsByTagName('a')[0].innerHTML = '->Open Spoiler<-';
}" />
<a rel="nofollow" href="#" onClick="return false;" style="text-decoration: none;"><b style="font-size: 0.8em;">->Spoiler ?ffnen<-</b></a>
</span>
</div>
<div class="quotecontent">
<div align="center" style="display: none; padding: 5px 0px 5px 0px; font-size:18px;"><br> {param}</div>
</div>
</div></center><br />

just increase or decrease of font-size:18px;

Simpler Spoilers are good which takes less space of postbit:
Demo

[alzaabi]

Thanks a lot for all

[kiba snowpaw]

i have VB 3.8.8 and evrytime i ad this i get
Forbidden
You do not have permission to access this document.
Web Server at danskeanimeklub.dk
and then my homepage down for 5 min or so
can someone tell me why and its only when useing this BB Code Code ???