I have made tuning of this code so the spoilers look now as standard VB floating panels and able to have custom spoiler headers.
Here is the demo.
HTML Code:
<script language='JavaScript' type='text/javascript'>
<!--
function spoiler(obj)
{
for (var i = 0; i < obj.childNodes.length; i++)
{
if (obj.childNodes[i].id == 'idTitle')
titleRow = obj.childNodes[i];
if (obj.childNodes[i].id == 'idSpoiler')
{
if (obj.childNodes[i].style.display != 'none')
{
obj.childNodes[i].style.display = 'none';
titleRow.innerHTML = '<img src="/forum/images/buttons/collapse_thead_collapsed.gif" align="absmiddle"> {option}';
}
else
{
obj.childNodes[i].style.display = 'block';
titleRow.innerHTML = '<img src="/forum/images/buttons/collapse_thead.gif" align="absmiddle"> {option}';
}
}
}
}
//--></script>
<div align=center onclick="spoiler(this);" style=""><div align=left id="idTitle" style="width: 95%; margin-top: 6px; clear: both; border: solid #0B198C; border-width: 1px 1px 1px 1px; padding: 5px 8px 5px; line-height: 15px; font-weight: bold; background: #5C7099 url(/forum/images/gradients/gradient_thead.gif) repeat-x top left; color: #FFFFFF; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; cursor: pointer; "><img src="/forum/images/buttons/collapse_thead_collapsed.gif" align="absmiddle"> {option}</div><div align=left id="idSpoiler" style="display: none; width: 95%; padding: 5px 8px 5px; display: none; border-left: 1px solid #0B198C; border-right: 1px solid #0B198C; border-bottom: 1px solid #0B198C; background: #F5F5F5; color: #000000; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-weight: normal;">{param}</div></div>
Regretefully, the script does not allow to use nested spoilers

