BB Code Enhancements - Special Spoiler

PLEASE CLICK INSTALL




Since nobody would do it for me I have coded it myself. First go add a new BBCode

Title:

Spoiler

BB Code Tag Name

Spoiler

Replacement:

<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 = '&nbsp;<b>Click to show spoiler</b>';
                        }
                        else
                        {
                            obj.childNodes[i].style.display = 'block';
                            titleRow.innerHTML = '&nbsp;<b>Click to hide spoiler</b>';
                        }
                    }
                }
            }
        //--></script>
<div width="100%" class="alt1" onclick="spoiler(this);" style="border-collapse: collapse; border: solid thin black;"><div id="idTitle" class="alt2" style="border-collapse: collapse; border: solid thin black; width: 100%;">&nbsp;<b>Click to show spoiler</b></div><div id="idSpoiler" style="display: none;">{param}</div></div><br />

Example:

[spoiler]Derek rules![/spoiler]

Description:

Creates and hides text.

Remove Tag If Empty: Yes

DEMO: http://forum.i628.net/showpost.php?p=12&postcount=3 (If it's down it's probably due to host problems. Please look at screenshot instead if down.

[Derek Chai]

I have fixed the mod. It should work properly now.

[gmerin]

Originally Posted by Derek Chai

I have fixed the mod. It should work properly now.

nope

[MotoMihalich]

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.

<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">&nbsp;{option}';
                        }
                        else
                        {
                            obj.childNodes[i].style.display = 'block';
                            titleRow.innerHTML = '<img src="/forum/images/buttons/collapse_thead.gif" align="absmiddle">&nbsp;{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">&nbsp;{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