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

[clutchthese]

When viewing on mobile device, it crashes app and when in mobile browser, redirects to homepage.... Anything to fix this?

[Grazu]

Your mobile have to support JavaScript, all iPhones & Android-Devices are compatible with this.

[ceho]

Hi, a very nice addon, thanks a lot . There is just one thing that I don't get managed: I would like to have the font inside of the spoiler box that's saying Open/Close Spoiler in the same font style like the one that's displayed before opening the box for the first time. So I would like to add

style="text-decoration: none;"><b style="font-size: 0.8em;"

into the span tag that contains the onClick stuff etc. But I don't get it. Would you mind helping me that the fonts are displayed all the same? Thanks a lot .

[clutchthese]

Originally Posted by Grazu

Your mobile have to support JavaScript, all iPhones & Android-Devices are compatible with this.

I'm talking the iphone app... via mobile suite.

It is on an iphone. you can open the spoiler, but to select the pic for a bigger view results in a crash.

[Grazu]

@ceho:
Maybe this could help you

<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 = '->Spoiler schlie?en<-';
  }else{
    this.parentNode.parentNode.style.width = '40%'
    this.parentNode.style.borderBottom = 'none';
    spoiler.style.display = 'none';
    this.getElementsByTagName('a')[0].innerHTML = '->Spoiler ?ffnen<-';
  }" />
<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> <b style="font-size: 0.8em;">{param}</b></div>
</div>
</div><br />

Originally Posted by clutchthese

I'm talking the iphone app... via mobile suite.

It is on an iphone. you can open the spoiler, but to select the pic for a bigger view results in a crash.

I'm using Safari, without problems. (:

[ceho]

Hi Grazu, thanks very much. That's part of it . Actually I want to change the font inside of this bit:

<span onClick="var spoiler = this.parentNode.parentNode.getElementsByTagName('div')[2];
  if (spoiler.style.display != ''){
    this.parentNode.parentNode.style.width = '98%'
    this.parentNode.style.borderBottom = '1px dotted #000000';
    spoiler.style.display = '';
    this.getElementsByTagName('a')[0].innerHTML = '>> Close Download Links <<';
  }else{
    this.parentNode.parentNode.style.width = '98%'
    this.parentNode.style.borderBottom = 'none';
    spoiler.style.display = 'none';
    this.getElementsByTagName('a')[0].innerHTML = '>> Open Download Links <<';
  }" />

Any idea how to do this?

And would you have an idea if it's possible to always have the spoiler at the bottom of each post, automatically? Thanks and keep up the great work mate.

[clutchthese]

Has anyone else tried this on a mobile? On two of my forums it redirects to homepage (my site.com/#)

[benjaminlwells]

any way to make the spoiler keep hidden text from showing on widgets and blocks?

[Amaury]

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.