Botão de Spoiler com Jquery Postado por:Mr. Staz Data: 9 de set. de 2012 Ás:19:24

Descrição:

Eaew galera,eu com mais um tuto u..u,dessa vez e um botão de spoiler,muito usado em blogs para não ficar muita coisa na tela,confiram o exemplo Demonstração

Para aplicar,primeiro procure por:

</head>

E acima disso cole:

<script type='text/javascript'>
jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp(&quot;(&quot;+a+&quot;|&quot;+b+&quot;)&quot;),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
$(&#39;.tgl&#39;).before(&#39;<span>Mostrar conteúdo</span>&#39;);
$(&#39;.tgl&#39;).css(&#39;display&#39;, &#39;none&#39;)
$(&#39;span&#39;, &#39;#box-toggle&#39;).click(function() {
$(this).next().slideToggle(&#39;slow&#39;)
.siblings(&#39;.tgl:visible&#39;).slideToggle(&#39;fast&#39;);
// aqui começa o funcionamento do plugin
$(this).toggleText(&#39;Mostrar&#39;,&#39;Esconder&#39;)
.siblings(&#39;span&#39;).next(&#39;.tgl:visible&#39;).prev()
.toggleText(&#39;Mostrar&#39;,&#39;Esconder&#39;)
});
})
</script>

Agore procure por:

]]></b:skin>

Acima disso cole:

#box-toggle span{
background:#ff7777;
padding:0px 0px 0px 4px;
display:block;
cursor:pointer;
font-weight:bold;
font-family:arial;
font-size:14px;
color:#000;
margin-top:1px;
border-radius:5px;
-webkit-border-radius:5px;
}

Agora o HTML do botão - Cole o codigo abaixo aonde for usar o botão,(Postagens,HTML/Javascript...)

<div id="box-toggle">

<div class="tgl">
<h2>
Conteúdo AKIE</h2>
</div>

<div class="tgl">
<h2>
Conteúdo AKIE</h2>
</div>

</div>

Observações:

1-O codigo em HTML do botão de spoiler não pode ser editado pela função "Escrever" do blogger.
2-Se copiar coloque a fonte.