Efeito JQuery Toggle

O Efeito JQuery Toggle é aquele efeito que faz revelar e esconder textos ao clicar no link
Primeiro vamos enserir o código javascript jquery no template, vá em EDITAR HTML e procure pela linha:

</head>

E acima dessa linha cole o código abaixo:

<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>Mostrar</span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').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>

Pronto o javscript está adicionado ao template, salve e vamso pro próximo passo , o HTML.
Crie uma postagem com o seguinte código e teste:

<div id="box-toggle">

<div class="tgl">
   <h2>Conteúdo um</h2>
   <p>Testando efeito Jquery Toggle...</p>
</div>

<div class="tgl">
   <h2>Conteúdo dois</h2>
   <p>Testando efeito Jquery Toggle...</p>
</div>

<div class="tgl">
   <h2>Conteúdo três</h2>
   <p>Testando efeito Jquery Toggle...</p>
</div>

</div>