como configurar toggle
Ola pessoal e o seguinte eu tenho um toggle aqui para exibir uma div com resultados dinâmicos.
Mas eu queria exibir o resultado de uma vez so, mas so consigo mostrar o resultado depois do que clicar mostrar/esconder .
vou postar o código que e do maujor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Toggle texto</title>
<style type="text/css" media="all">
#box-toggle {
width:500px;
margin:0 ;
text-align:justify;
font:12px/1.4 Arial, Helvetica, sans-serif;
}#box-toggle .tgl {margin-bottom:30px;}
#box-toggle span {
display:block;
cursor:pointer;
font-weight:bold;
font-size:14px;
color:#c30;
margin-top:15px;
}
</style>
<script type="text/javascript" src="jquery.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>
</head>
<body>
<div id="box-toggle">
<div class="tgl">
<h2>Conteúdo um</h2>
<p>Teste 1</p>
</div>
<div class="tgl">
<h2>Conteúdo dois</h2>
<p>Conteúdo 2</p>
</div>
<div class="tgl">
<h2>Conteúdo três</h2>
<p>jQuery</p>
</div>
</div>
</body>
</html>Bom agradeço se vocês poderem me ajudar.
Discussão (1)
Carregando comentários...