Revelar e esconder conteúdo na vertical

Revelar e esconder conteúdo na vertical com mudança de texto

by Jairo Fontes

HTML

<div id="box-toggle">

    <h2 class="titulo">Titulo do Conteúdo Um</h2>
    <div class="tgl">
       <p>Lorem ipsum dolor sit amet, consectetuer...</p>
    </div>
    
    <h2 class="titulo">Conteúdo dois</h2>
    <div class="tgl">
       <p>Lorem ipsum dolor sit amet, consectetuer...</p>
    </div>
    
    <h2 class="titulo">Conteúdo três</h2>
    <div class="tgl">
       <p>Lorem ipsum dolor sit amet, consectetuer...</p>
    </div>

</div>

CSS

body{
    font-family:Arial, Helvetica, sans-serif;
}
#box-toggle .tgl {
    margin-bottom:10px;
}
.titulo {
    cursor:pointer;
    font-weight:bold;
    font-size:14px;
    color:#c30;
    margin-top:15px;
}

JavaScript

jQuery.fn.toggleText = function(a, b) {
    return this.html(this.html().replace(new RegExp("(" + a + "|" + b + ")"), function(x) {
        return (x == a) ? b : a;
    }));
}

$(document).ready(function() {
    $('<span> +</span>').appendTo('.titulo');
    $('.tgl').css('display', 'none')
    $('.titulo', '#box-toggle').click(function() {
        $(this).next().slideToggle('fast').siblings('.tgl:visible').slideToggle('fast');
        // aqui começa o funcionamento do plugin
        $(this).toggleText('+','-').siblings('span').next('.tgl:visible').prev().toggleText('+','-')
    });
});