Exibir e Ocultar uma div com jQuery
O jQuery é um biblioteca poderosa e robusta que nos permite realizar ricos efeitos de forma simples e prática.
Neste post veremos como podemos exibir e ocultar um elemento DIV utilizando jQuery.
Vamos aos códigos do CSS e (x)HTML:
body {
font: 12px Verdana, Geneva, sans-serif;
}
#conteudo {
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
<a id="exibir" href="#">Exibir DIV</a>
<div id="conteudo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.
<a id="ocultar" href="#">Ocultar DIV</a>
</div>
Agora vamos ao nosso código jQuery que será o responsável por exibir e ocultar o elemento DIV conteudo:
$(document).ready(function(){
$(‘#conteudo’).hide();
$(‘a#exibir’).click(function(){
$(‘#conteudo’).show(‘slow’);
});
$(‘a#ocultar’).click(function(){
$(‘#conteudo’).hide(‘slow’);
})
});
Iniciaremos o nosso código com a função $(document).ready(function(). Esta função é uma das mais importantes do jQuery, ela trata o evento de carregamento do elementos da página, substituindo assim os velhos eventos onload e window.load.
A próxima linha $(‘#conteudo’).hide(); oculta a div conteudo, para que ela inicialmente não apareça. A função click $(‘a#exibir’).click(function() será invocada quando o link #exibir receber o click, realizando a exibição da div através do efeito show $(‘#conteudo’).show(‘slow’);.
Agora vamos utilizar a mesma função click para ocultar a div. Quando o link #ocultar for clicado $(‘a#ocultar’).click(function() ocultaremos a div $(‘#conteudo’).hide(‘slow’); através do efeito hide.(“slow”) .
Para ver o exemplo completo clique aqui.
Até a próxima.
11 Comentários
Deixe o seu comentário
Saurooon on julho 18th, 2009
http://www.viniciusdepaula.com – da best. Keep it going!
Humberto Oliveira on julho 24th, 2009
Muito bom, muito simples para implementar.
Humberto Oliveira on julho 24th, 2009
Vinícius, uma dúvida cruel. Implementei o seu exemplo e ele só funciona completamente no Chrome. No IE 7 e FF 3, ele exibe a div, porém não oculta a mesma.
Será que tem algum macete?
Vinicius de Paula on julho 25th, 2009
Olá Humberto,
testei o exemplo no Firefox e IE 8 e esta funfando belezinha. Tente acessar o demo no link:
http://viniciusdepaula.com/blog/examples/Exibir%20e%20Ocultar%20uma%20div%20com%20jQuery.html
Abraço e obrigado pela visita.
Helder on outubro 2nd, 2009
Muito bom ! Simples e Útil…
Felipe on outubro 26th, 2009
Muito bom o tutorial vinicus
mais poderia me tirar uma duvida de iniciante
eu tenho um tabela gerada dinamicamente, onde eu gostaria que tivesse uma div com esse efeito abaixo de cada linha da tabela
eu ficaria muito grato se pudesse me ajudar
Estou tentado mais a só a primeira div é que funciona
“/
Vinicius de Paula on outubro 26th, 2009
Olá Felipe,
obrigado pela visita.
Me envie o seu código fonte que tentarei lhe ajudar… Ok?
[ ]‘s
Felipe on outubro 27th, 2009
Muito obrigado pela atenção vinicius
aki em baixo segue o código que estou usando para ocultar e desocultar as divs
$(document).ready(function(){
$(‘.ocultar’).hide();
$(‘.btn_editar’).click(function(){
$(‘.ocultar’).show(‘slow’);
});
$(‘.conteudo’).click(function(){
$(‘.ocultar’).hide(‘slow’);
})
});
e aki em baixo segue o PHP que insere as tabelas e as Divs
echo ”
$nome
$email
Ativado
EDITAR aserwerawefwefw
EXCLUIR
“;
———————————————–
Vlwss denovo pela atenção
ivolnei on novembro 2nd, 2009
Olá Vinícios.
Parabéns pelo código. Excelente conteúdo.
Por favor me esclarece uma dúvida, pois sou novato na área…
Gostaria de chamar nesta div um formulário de login, tenho o form pronto em php, junto com algumas funções. ao clicar em login aparecerá esta página para o usuário se logar? Por exemplo com include_once?
Obrigado.
Vinicius de Paula on novembro 2nd, 2009
Olá Ivolnei,
obrigado pela visita.
Fiz um exemplo utilizando um Form para lhe ajudar….
De uma olhada clicando aqui
[ ]‘s
Bruno AdeS on fevereiro 2nd, 2011
Muito bom, troquei o .hide do link “” por .slideUp/SlideDown e também ficou muito bacana o efeito, utilizarei para exibir/ocultar um formulario de contato.VA:F [1.3.4_676]
please wait...
Rating: 2.0/5 (1 vote cast)