Simples colapsivel

by Felype Rennan

HTML

<!-- Colorido -->
    <div class="caixa compacto">
        <h1 class="titulo-expandir enfeitado">Topico 1 <button class="botao-expandir"></button></h1>
        <div class="caixa colapsivel">
            asdfasdfasdf<br/>
            qwerqwerqwer<br/>
            qweerqwerqwerqer<br/>
        </div>    
    </div>
    <div class="caixa compacto">
        <h1 class="titulo-expandir enfeitado">Topico 2 <button class="botao-expandir"></button></h1>
        <div class="colapsivel caixa">
            asdfasdfasdf<br/>
            asdfasdf<br/>
            asdfasdf<br/>
            asdff
        </div>    
    </div>    
<!-- Simples -->
    <div class="caixa compacto">
        <h1 class="titulo-expandir">Topico 3 <button class="botao-expandir"></button></h1>
        <div class="caixa colapsivel">
            asdfasdfasdf<br/>
            qwerqwerqwer<br/>
            qweerqwerqwerqer<br/>
        </div>    
    </div>
    <div class="caixa compacto">
        <h1 class="titulo-expandir">Topico 4 <button class="botao-expandir"></button></h1>
        <div class="colapsivel caixa">
            asdfasdfasdf<br/>
            asdfasdf<br/>
            asdfasdf<br/>
            asdff
        </div>

CSS

body {
    font-size: 18px;
}

.caixa {
    border: 1px solid #ccc;
    padding: 0;
}
.caixa .caixa {
    padding: 12px;
}

.compacto:not(.expandir) .caixa {
    border: 1px solid transparent !important;
}

.compacto .titulo-expandir {
    font-size: 22px;
    font-family: sans-serif;
    font-weight: 700;
    cursor: pointer;
    padding: 12px;
    margin: 0;
}
.compacto .titulo-expandir .botao-expandir {
    font-size: 0.5em;
}

.compacto .titulo-expandir.enfeitado {
    transition: background 0.1s ease-out;
    width: 100%;
    display: block;
    background: #444;
    color: #eee;
}
.compacto.expandir .titulo-expandir.enfeitado {
    width: 100%;
    display: block;
    background: #246;
    color: #eee;
    padding: 12px;
    margin: 0;
}

.compacto .botao-expandir {
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none !important;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    width: 4em;
    height: 2em;
    display: inline-block;
    background: #555;
    color: black;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.compacto:not(.expandir) .botao-expandir:hover {
    background: #777;
}

.compacto.expandir .botao-expandir {
    background: rgba(0, 89, 169, 1);
}
.compacto.expandir .botao-expandir:hover {
    background: rgba(20, 109, 189, 1);
}

.compacto .botao-expandir:before {
    outline: none !important;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
    width: 8em;
    height: 8em;
    position: absolute;
    left: -150%;
    top: -50%;
    background: white;
    content: " ";
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

.compacto.expandir .botao-expandir:before {
    left:...

JavaScript

$('.compacto').each(function () {
    $(this).find('.titulo-expandir').each(function() {
        $(this).click(function () {
            var v = $(this);
            do {
                if (v.hasClass("compacto")) {
                    v.toggleClass("expandir");
                    if (v.hasClass("expandir")) {
                        v.siblings('.compacto').removeClass("expandir");
                    }
                    break;
                }
                v = v.parent();
            } while (v);
        });
    });
});