veja como se faz: "Efeito jQuery toggle"

...
.:.

Efeito jQuery toggle

Como obter este efeito, que proporciona ao usuário 'revelar/esconder' conteúdo da página com jQuery:

CSS:

<style type="text/css" media="all">
#box-toggle {
margin:0 auto;
text-align:left;}
#box-toggle .tgl {margin-bottom:20px;}
#box-toggle span {
display:block;
cursor:pointer;
font-weight:bold;
font-size:14px;
color:#c30;
margin-top:15px;
}
</style>

ScriptjQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<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(){
$('.tgl').before('<span>Revelar conteúdo</span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>

Marcação HTML:

<div id="box-toggle">
<div class="tgl">
Conteúdo Oculto
</div></div>

Para usuários do Blogger:

Colocar o código CSS 
e 
o ScriptjQuery 
abaixo da tag ]]></b:skin>. 

Onde está em negrito no Script, coloque a chamada que deseja ('Revelar', 'Leia Mais', 'Ver', etc...)

Colocar a marcação HTML dentro do post ou widget da sidebar.
Créditos: Maujor


visto em :  emporiodigital