Spoiler Code

[Bradley]

This code will produce a "spoiler" block. Your are able to give each spoiler custom text to click on. A button is added to the posting page for the spoiler.

You can view an example if you want. That'd probably explain it best.

Global Footers

<style type="text/css">
<!--
.sptitle { color: #ff0000; font-weight: bolder; background-color: #40454c; }
.spbody { background-color: #000; color: #dedede; }
-->
</style>

<script type="text/javascript">
<!--
/*
Spoiler Code
Copyright © 2005 Bradley Nelson a.k.a. CCWorld
All Rights Reserved

Do not repost without permission.
For use on Proboards Boards only.
This Header must remain intact at all times.
*/

var buttonUrl = "http://theccworld.com/pro/spoiler.gif";
var defaultSpText = "Spoiler";

var tds = document.getElementsByTagName("td"); var i; var t;
var repRegex = /\

SPOILER: Click to show

((.)+?)\[\/spoiler\]/i
function showSp(id){
    if (document.getElementById(id+'b').style.display == "block"){
        document.getElementById(id+'b').style.display = "none";
        document.getElementById(id+'a').style.display = "block";
    } else {
        document.getElementById(id+'b').style.display = "block";
        document.getElementById(id+'a').style.display = "none";
    }
}

if(location.href.match(/action=display/i)){
    for(i=0; i<tds.length; i++){
        if(tds.item(i).colSpan == "3" && tds.item(i).firstChild.nodeName.match(/hr/i)){
            t = 0;
            while (tds.item(i).innerHTML.match(/\[\/spoiler\]/i)){
                tds.item(i).innerHTML = tds.item(i).innerHTML.replace(repRegex, '<table class="bordercolor" cellpadding="4" cellspacing="1" border="0" width="90%"><tr><td class="sptitle"><a href="#" onclick="showSp(\'sp'+i+'-'+t+'\');return false;">$1</a></td></tr><tr><td class="spbody"><div id="sp'+i+'-'+t+'a" style="font-style:italic;">Hidden</div><div id="sp'+i+'-'+t+'b" style="display:none;">$3</div></td></tr></table>');
                t++
            }
        }
    }
}

if(location.href.match(/action=(post|createpoll|modifypost)/i)){
    var spImage = document.createElement("img");
    spImage.src = buttonUrl;
    spImage.alt = "Spoiler";
    spImage.border = "0";
    var spLink = document.createElement("a");
    spLink.href = 'javascript:add("

SPOILER: Click to show

","

")';
    spLink.appendChild(spImage);
    for(i=0; i<tds.length; i++){
        if(tds.item(i).width == "30%" && tds.item(i).className.match(/windowbg2/i)){
            tds.item(i+1).firstChild.insertBefore(spLink, tds.item(i+1).firstChild.getElementsByTagName("select").item(0).previousSibling);
            break;
        }
    }
}

// -->
</script>

The URL to the button you'd like to use. Please don't hotlink off the one I made. You can use the image if you host it yourself.
This is the default "title" text for spoilers.

sptitle is the class for the title bar of the spoiler.
spbody is the class for the body of the spoiler.
You can edit their CSS properties in the style block.