[CSS][BBCODE] Spoiler Button

**Sephiroth** · 06-28-2014

Demo:

CSS

Code:

.myButton {
          -moz-box-shadow: 0px 0px 33px 0px #175dbf;
          -webkit-box-shadow: 0px 0px 33px 0px #175dbf;
          box-shadow: 0px 0px 33px 0px #175dbf;
          background-color:#212121;
          -moz-border-radius:8px;
          -webkit-border-radius:8px;
          border-radius:8px;
          border:2px solid #175dbf;
          display:inline-block;
          cursor:pointer;
          color:#2b9cff;
          font-family:Verdana;
          font-size:13px;
          font-weight:bold;
          padding:4px 7px;
          text-decoration:none;
          text-shadow:0px 0px 16px #2c2d30;
}
.myButton:hover {
          background-color:#ffffff;
}
.myButton:active {
          position:relative;
          top:1px;
}
.spoiler_content {
          border : 1px solid #185177;
         background : #1a1c1f;
         line-height:18px
         display : block;
         margin-top:10px;
         text-align:left;
         padding : 12px 12px 12px 12px;
         width : auto;
        -moz-box-shadow: 0px 0px 33px 0px #175dbf;
        -webkit-box-shadow: 0px 0px 33px 0px #175dbf;
        box-shadow: 0px 0px 33px 0px #175dbf;
        -moz-border-radius:8px;
        -webkit-border-radius:8px;
        border-radius:8px;
        display:inline-block;
        font-family:Verdana;
        font-size:13px;
        font-weight:bold;
        padding:auto auto;
        text-decoration:none;
}

More: http://www.bestcssbuttongenerator.com/

-
-

BBCODE

Title: Spoiler
BB Code Tag Name: Spoiler

Replacement:

Code:

 
<div align="left">
<div class="quotetitle">
<input class="myButton" value="Show spoiler" onclick="java: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 spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show spoiler'; }" onfocus="this.blur();" type="button">
</div>
<div class="quotecontent">
<div style="display: none;"><span class="spoiler_content">{param}</span></div>
</div>
</div>

Example: [spoiler] text goes here [/spoiler*] without *

Description: Used to hide things, shorten pages, organize posts, ETC.
Image:

Use {option}: No
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

**THUMBS** · 06-28-2014

nice one Sephiroth i was going to ask about this

**Crimi Martin** · 06-28-2014

Noooooooooooo! My feed reader can't open spoiler buttons.
That's going to suck for me if the posters I'm interested in here, start using this frequently.
It's almost as weird as the "Register to see the link" for images in my feed reader I started getting here last week.

**Sephiroth** · 06-28-2014

Originally Posted by Crimi Martin

Noooooooooooo! My feed reader can't open spoiler buttons.
That's going to suck for me if the posters I'm interested in here, start using this frequently.
It's almost as weird as the "Register to see the link" for images in my feed reader I started getting here last week.

Feed reader?

Is there a link i can do some tests?

**Sephiroth** · 06-28-2014

I wrote a different spoiler code.

Title: Spoiler2
BB Code Tag Name: Spoiler2

Replacement:

Code:

<div id="hidespoiler{option}"  style="display:none; width:100px" class="myButton" onclick="setTimeout(function() {document.getElementById('hidespoiler{option}').style.display='none', document.getElementById('showspoiler{option}').style.display='block', document.getElementById('spoilercontent{option}').style.display='none'}, 10); return false" />Hide Spoiler</div>

<div id="showspoiler{option}" style="display:block; width:100px" class="myButton" onclick="setTimeout(function() {document.getElementById('hidespoiler{option}').style.display='block', document.getElementById('showspoiler{option}').style.display='none', document.getElementById('spoilercontent{option}').style.display='block'}, 10); return true" />Show Spoiler</div>


<div id="spoilercontent{option}" style="display:none" class="spoiler_content">{param}</div>

Use {option}: Yes
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

[spoiler2=something]Text goes here [/spoiler2*] without *

Spoiler Button 2 Demo:

Show Spoiler

Example #2;
[spoiler2=2][spoiler2=3][spoiler2=4][spoiler2=5] Text goes here [/spoiler2*] [/spoiler2*] [/spoiler2*] [/spoiler2*] without *

Show Spoiler

**Crimi Martin** · 06-28-2014

Sephy, I use the one from feedreader.com
It's called FeedReader3.
My other reader is RssOwl from www.rssowl.org.

Even though they have javascript enabled, they usually don't open spoiler buttons from some manhwa threads I follow.

**Sephiroth** · 06-28-2014

Originally Posted by Crimi Martin

Sephy, I use the one from feedreader.com
It's called FeedReader3.
My other reader is RssOwl from www.rssowl.org.

Even though they have javascript enabled, they usually don't open spoiler buttons from some manhwa threads I follow.

Never used this tool, but try this.

Start the RSSowl.
Go to tab Tools >> Preferences >> Browsers, under Content, Uncheck "Disable javascript in browser"
The Spoiler button doesn't work because the javascript is disabled.

The spoiler button worked after enabling javascript in RSSowl.

**Crimi Martin** · 06-28-2014

Okay I'll be using RssOwl more than FeedReader3 then. I already have javascript enabled on both, so I can view Youtube/Vimeo videos, don't know why it doesn't work sometimes.
Thank you.

Thread: [CSS][BBCODE] Spoiler Button

Thread Tools

Search Thread

Display