Eaew galera,eu com mais um tuto u..u,dessa vez e um botão de spoiler,muito usado em blogs para naum ficar muita coisa na tela,confiram o exemplo aqui
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("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.tgl').before('<span>Mostrar conteúdo</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>
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>
0 Deixe um Comentário:
Postar um comentário