Efeito esconder e mostrar conteúdo

O jquery entre as suas inúmeras facilidades tem a possibilidade de mostrar ou ocultar um conteúdo de uma div por exemplo.

Essa funcionalidade é muito útil para páginas com conteúdo muito grande e que podem ser oculto.

Para fazer um dos métodos é usar a função Toogle.

Veja a Demonstração do exemplo feito

Veja abaixo o código:

HTML


<div id="box_geral">
<div class="box">
<h2>Título 1</h2>
<p>Este é um exemplo de texto que será mostrado ao clicar no Título 1, aqui você pode usar qualquer tag html, como inserir imagens, links, textos, etc.</p>
</div>
<div class="box">
<h2>Título 2</h2>
<p>Este é um exemplo de texto que será mostrado ao clicar no Título 2, aqui você pode usar qualquer tag html, como inserir imagens, links, textos, etc.</p>
</div>
<div class="box">
<h2>Título 3</h2>
<p>Este é um exemplo de texto que será mostrado ao clicar no Título 3, aqui você pode usar qualquer tag html, como inserir imagens, links, textos, etc.</p>
</div>
</div>


Jquery


<script type="text/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(){
$('.box').before('<span>Mostrar conteúdo</span>');
$('.box').css('display', 'none')
$('span', '#box_geral').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
// aqui começa o funcionamento do plugin
$(this).toggleText('Mostrar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Mostrar','Esconder')
});
})
</script>


CSS


<style>
*{margin:0;padding:0;}
body{background:#000; color:#FFFF00; font: 13px verdana, arial;}
#box_geral{width:500px; margin:0 auto; display:block; background:#222; border-radius:3px; margin-top:20px; padding:10px;}
#box_geral span{display:block; cursor:pointer; font-size:16px; text-align:center;background:#FFFF00; color:#000; margin: 5px 0; padding:5px; border-radius:3px;}
.box{padding:10px;}

</style>


Clique AQUI para fazer Download do código completo.
Até mais!