Ocultando uma div com jQuery

Exibe oculta Divs

Dados da Criança cadastrada

Data de Nascimento:

Alergias:

Nome do Médico:

Telefone do Médico:

Plano de Saúde:

Quer usar link em vez de botão?

Exibir link n°1

Olha o link 1 ae gente!

Exibir link n°2

Olha o link 2 ae gente!

Exibir link n°3

Olha o link 3 ae gente!

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<br />
<br />
Ocultando uma div com jQuery<br />
<style>
body {font: 12px Verdana, Geneva, sans-serif;}
p {margin: 0px;}
.conteudo {border:1px solid #CCCC33; padding:10px; margin-top:10px; width:500px;}
.bt_link{font-family: Verdana, Geneva, sans-serif;font-size: 14px;font-weight: bold;color: #F00;}
.bt_exibir{font-family: Verdana, Geneva, sans-serif;font-size: 10px;font-weight: bold;color: #00F;}
</style><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript">
$(document).ready(function(){
$('.conteudo').hide();
//Função Toggle executa as funções na ordem dos cliques,
//pode ter quantas quiser, prático, porque vc
//usa só um botão para mostrar e ocultar, funciona com links também
$(".bt_exibir").toggle(
//1ª Função, pega valor do "name" exibe a div e muda o texto do botão
function() {
var_n=$(this).attr("name")
$("#bt_"+var_n).attr('value', 'Ocultar Div n°'+var_n);
$("#conteudo_bt_"+var_n).show('slow');},
//Segunda função esconde a div e volta o texto normal do botão
function() {
var_n=$(this).attr("name")
$("#bt_"+var_n).attr('value', 'Exibir Div n° '+var_n);
$('#conteudo_bt_'+var_n).hide('slow');}
); //Fim (".bt_exibir").toggle

//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//Togle no link acho que link não aceita ID,
//usei title para guardar o atributo
$(".bt_link").toggle(
function() {
var_x=$(this).attr("title")
$(this).html("Ocultar link nº"+var_x);
$("#cont_link_"+var_x).show('slow');},
function() {
var_x=$(this).attr("title")
$(this).html("Exibir link nº"+var_x);
$('#cont_link_'+var_x).hide('slow');}
); //Fim (".bt_link").toggle
}); //Fim de tudo do jquery
</script><br />
<br />
<br />
<h1>Exibe oculta Divs </h1><hr /><br />
<br />
<br />
<p><b>Dados da Criança cadastrada</b></p><p>Data de Nascimento: <?php echo $dados["dt_nasc_crianca"]; ?></?php></p><p>Alergias: <?php echo $dados["alergias"]; ?></?php></p><p>Nome do Médico: <?php echo $dados["medico"]; ?></?php></p><p>Telefone do Médico: <?php echo $dados["tel_medico"]; ?></?php></p><p>Plano de Saúde: <?php echo $dados["plano_saude"]; ?></?php></p><br />
<p> </p><?php } ?><br />
<hr /><h2>Quer usar link em vez de botão?</h2><a href="#" title="1" target="_self" class="bt_link">Exibir link n°1</a><br />
<br />
<div id="cont_link_1" class="conteudo">Olha o link 1 ae gente!</div><a href="#" title="2" target="_self" class="bt_link">Exibir link n°2</a><br />
<br />
<div id="cont_link_2" class="conteudo">Olha o link 2 ae gente!</div><a href="#" title="3" target="_self" class="bt_link">Exibir link n°3</a><br />
<br />
<div id="cont_link_3" class="conteudo">Olha o link 3 ae gente!</div></?php><br />
</!doctype><br />
<br />

Exibe Divs

menu blog

sexta-feira, 25 de novembro de 2011