Spoiler

Making a simple spoiler

HTML

<spoiler data-title="test">
    test
    <spoiler>
        test
    </spoiler>
    <spoiler>
        aaa
    </spoiler>
</spoiler>

CSS

spoiler
{
    display: block;
    margin: 0;
    
    background-color: #555;
    border-style: solid;
    border-color: #777;
    border-width: 0 5px 5px 5px;
    
    padding: 10px;
    color: #fff;
}

button.sp-but
{
    display: block;
    width: 100%;
    margin: 0;
    
    background-color: #555;
    border-style: solid;
    border-color: #777;
    border-width: 5px 5px 5px 5px;
    
    padding: 10px;
    color: #fff;
    font-size: 100%;
}

button.sp-but:hover
{
    border-color: #999;
}

button.sp-but-open
{
    border-bottom-width: 1px;
}

JavaScript

$(function()
{
    var spOpen = "+";
    var spClose = "-";

    function createSpBut(j, o)
    {
        return "<span style='float:left;'>" + (j.data("title") == null? "" : j.data("title")) + "</span><span style='float:right;'>" + (o? spOpen : spClose) + "</span>";
    }

    $("spoiler").hide().each(function()
    {
        $(this).before("<button class='sp-but'>" + createSpBut($(this), true) + "</button>");
    });
    $("button + spoiler").prev().toggle(function()
    {
        $(this).addClass("sp-but-open").html(createSpBut($(this).next(), false)).next().slideDown("fast");
    }, function()
    {
        $(this).removeClass("sp-but-open").html(createSpBut($(this).next(), true)).next().slideUp("fast");
    });
});