<script type="text/javascript">
    function tag_spoiler(){
        var y = prompt("Введите описание закрытой кнопки", '');
        if (y != 'null' && y != '' && typeof(y) != 'object' && typeof(y) != 'undefined') {
        var x = prompt("Введите описание открытой кнопки", '');
        if (x == 'null' || x == '' || typeof(x) == 'object' || typeof(x) == 'undefined')
            bbcode('[spoiler=' + y + ']', '[/spoiler]');
        else
            bbcode('[spoiler=' + y + '|' + x + ']', '[/spoiler]');
        }
        else
        bbcode('[spoiler]', '[/spoiler]')
    }
    function addSpoiler(str, from, internal){
        var pos = 0, pos2 = 0, pos_c = 0, pos_l = 0, newpos = 0, string = '', close = '', open = '';
        if ((pos = str.indexOf("[spoiler", from)) == -1)
        return str;
        if ((pos2 = str.indexOf("[/spoiler]"), pos + 9) == -1)
        return str;
        if (((pos_c = str.indexOf("]", pos + 8)) != -1) && ((pos_c != pos + 8) && (pos_c != pos + 9))) {
        string = str.substring(pos + 9, pos_c);
        if ((pos_l = string.indexOf("|")) != -1) {
            close = string.substring(0, pos_l);
            open = string.substring(pos_l + 1, string.length);
        }
        else {
            close = string;
            open = string;
        }
        }
        else {
        close = 'Показать спойлер';
        open = 'Скрыть спойлер';
        }
        newpos = str.indexOf("[spoiler", pos + 9)
        if (newpos < pos2 && newpos != -1)
        str = addSpoiler(str, pos + 9, true)
        if ((pos2 = str.indexOf("[/spoiler]", pos + 9)) == -1)
        return str;
        str = str.substring(0, pos) + makeSpoiler(str.substring(pos_c + 1, pos2), open, close) + str.substring(pos2 + 10, str.length)
        if (str.indexOf("[spoiler") != -1 && internal == false)
        str = addSpoiler(str, 0, false)
        return str;
    }

    function makeSpoiler(txt, open, close){
        txt = '<div class="quote-box" style="padding:1px;background: none; border: 0;"><cite style="width:100%;margin:0;"><a id="' + open + '" class="spoiler" style="width:100%;font-size:10px; margin:0;border:none;cursor:pointer;text-align:left;">'+close+'</a></cite><blockquote class="quote-box" style="display:none; width: 95%;border: 1px solid black;margin:0;">' + txt + '</blockquote></div>'
        return txt;
    }

    $(document).ready(function(){
        $("div.quote-box > cite > a.spoiler").click(function(){
        $(this).parents("div.quote-box:first").find("blockquote.quote-box:first").toggle("slow");
        var a = this.innerHTML;
        this.innerHTML= $(this).attr('id');
        $(this).attr('id', a);
        });
    });

    if ((document.URL.indexOf("viewtopic.php") != -1) || (document.URL.indexOf("post.php") != -1)) {
        elm = document.getElementById("pun-main").getElementsByTagName("div")
        for (x in elm)
        if (elm[x].className == "post-content") {
            var post = elm[x]
            post.innerHTML = addSpoiler(post.innerHTML, 0, false)
        }
    }
    if(form=document.getElementById("answer"))
        form.getElementsByTagName("tr")[0].insertCell(1).innerHTML="<img  id=\"spoiler\" title=\"Спойлер\" onclick=\"tag_spoiler('[spoiler]','[/spoiler]')\" src=\"/i/blank.gif\" />"
    </script>

<input type="button" value="спойлер" onclick="tag_spoiler();">

<script type="text/javascript">
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(20).innerHTML='<img onclick="tag_spoiler();" title="Спойлер" src="https://forumupload.ru/uploads/0009/42/8c/1501-1.gif" style="width:20px;height:22px;padding-left:6px;">'
</script>

<table><tr>
    <td onclick="return changeVisibility('mycolor', this)"><img src="Фоновая картинка (кнопка)" alt="Название_содержимого" /></td></tr></table>
    <div class="container" id="mycolor" style="display:none; width:ширина кнопкиpx">
    <table cellspacing="0">
    <tr>
    <td>
    СОДЕРЖИМОЕ
    </td>
    </tr>
    </table>
    </div>