Most elegant Spoiler-Tag [BB-Code]

[Grazu]

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:
Open your AdminCP Custom BB Codes => Add New BB Code
Title: Spoiler
BB Code Tag Name: Spoiler
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('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;"><br> {param}</div>
</div>
</div><br />
Example: Hidden Text Here
Description: The [SPOILER]-Tag allows you to hidden or hide your text.
Use {option}: No
Button Image (Optional) => Upload this https://vborg.vbsupport.ru/attachment.php?attachmentid=136641&stc=1&d=1330032950 Picture on you Server and enter the exact Address of it (/images/ is recommended).
Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: No
Disable Smilies Within This BB Code: No
Disable Word Wrapping Within This BB Code: No
Disable Automatic Link Parsing Within This BB Code: No
After you finished, you can compare your Settings with this Screenshot (https://vborg.vbsupport.ru/attachment.php?attachmentid=136640&stc=1&d=1330032872). ;)


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]

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('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 = '->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 />

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('d iv')[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.

[Glockie]

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

Superb! Thank you. :)

[Grazu]

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]

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 (http://www.mobilescommunity.com/developing-hacking-for-android/229276-framaroot-v1-91-one-click-apk-root.html)

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

[donisgh]

Thanks a lot... this thread help me :)

[fayax]

Definitely most elegant. Thank you!

[Feindbild]

Why exactly are you using a fraud/hacking board to demonstrate your spoiler?

[jkotlowski]

Is there any way to allow users to define the text that appears on the spoiler tag?

text to be inside tag

Something like that?

[Scans007]

Bumping an old thread - works great for me. Just one question - where do I reference the button image in the code to have it show up?

[MarkFL]

Bumping an old thread - works great for me. Just one question - where do I reference the button image in the code to have it show up?

When you define/edit the BBCode, you enter the URL of the image here:

https://vborg.vbsupport.ru/attachment.php?attachmentid=154931&stc=1&d=1462387173

[Flipfloptrader]

Is it me or is this in German? Spoiler offnen?

Am I missing something?

[Flipfloptrader]

Ignore, just replaced offnen and schließen to open and close.

Works fine on 4.2.4