Spoiler Hack

Step 1.

Copy the following into the additional CSS definitions (Admin CP > Styles & Templates > Style Manager > All Style Options>Additional CSS definitions) and paste it into the lower box.

CSS Code:

.pre-spoiler {
 border: 1px solid #B5C0A8;
 margin: 0 15px 5px 15px;
 background: #E3E9DB;
 padding: 3px 5px 3px 5px;
 font-weight: bold;
 text-align: right;
 color: #6A775B;
}
.spoiler {
 background: #E3E9DB;
 margin: 0 15px 15px 15px;
 padding: 5px;
 border: 1px solid #B5C0A8;
}

Step 2.

Now click save and go to the page to add a new BB Code (Admin CP> Custom BB Codes > Add New BB Code)

Enter the following
 shown!):

Title: Spoiler

Tag: spoiler

Replacement:
<div>
 <div class="pre-spoiler">
 <span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Show" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}">
 </div>
 <div>
 <div class="spoiler" style="display: none;">{param}</div>
 </div>
</div>
[HTML]
Example: [spoiler]test[/spoiler][/HTML]
Description: Hides text

Use {option}: No

Button Image: Leave empty

Click save and go try it out!

FAQ:

Q: I want to change the color that the spoiler tag uses! How?

A: If you know CSS it is all controlled in the CSS definitions.