show/hide de elementos com jQuery

cassianooliver · Julho 21, 2008

Bom, não sei se aqui é a área correta para postagem de tutorial, se não for, peço que algum moderador mova para a área correta...

Vou mostrar como utilizar jQuery para exibir/ocultar elementos em uma página...

JQuery é um framework que visa facilitar a programação em javascript, tornando o código mais simples, flexível e infinitamente mais elegante. Além de ser bem leve, a jQuery conta ainda com um vasto arsenal de plugins para as mais diferentes tarefas...

usar o jQuery é muito simples..

a sintaxe básica de selecionar algum elemento é:

$("seletor").atributo("valor");

exemplo, aplicar negrito a todos os parágrafos

$("p").css("font-weight", "bold");

e ainda podemos usar o atributo class e id para referenciar os elementeos... exemplo: atributo class seleciono o paragrafo com a class "primeiro"

$("p.primeiro").css("font-weight", "bold");

seleciono o paragrafo com o id "ultimo"

$("p#ultimo").css("font-weight", "bold");

mais sobre o seletores aqui Bom, vamos agora ao que interessa, fazer o famoso show/hide (exibir/ocultar) divs... Primeiramente, visite o site da jQuery e baixe a jQuery 1º exemplo, exibir um elemento oculto. crie o seguinte xhtml:

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Show/Hide com jQuery</title> // Assim inserirmos o jquery.js em nossa página <script type="text/javascript" src="jquery.js"></script> // Aqui vem o script <script type="text/javascript"> $(document).ready(function() { $("h1#mostra").click(function() { $("div#oculto").show(); }); }); </script> <style type="text/css"> html { font: 12px Arial, Helvetica, sans-serif; text-align: center; } #conteudo, #oculto { background: #e5e5e5; width: 480px; margin: auto; padding: 10px; border: solid 1px #ccc; } #conteudo h1 { font-size: 15px; } #oculto { display: none; margin-top: 30px; } </style> </head> <body> <div id="conteudo"> // Aqui o elemento que exibe o elemento oculto <h1 id="mostra">Clique aqui para exibir/ocultar um elemento</h1> </div> // aqui o elemento oculto <div id="oculto"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eleifend. Mauris tincidunt lectus in libero. Suspendisse interdum lectus vitae urna. Morbi vitae enim vel justo dapibus porttitor. </div> </body> </html>

explicação

<script type="text/javascript">
   $(document).ready(function() {
       // Adicionamos uma função de "click" ao h1 identificado como "mostra"
       $("h1#mostra").click(function() {
           // Quando clicado, exibirá a div identificada como "oculto"
           $("div#oculto").show();
       });
   });
   </script>

podemos ainda usar um efeito "fade" na exibição, por exemplo:

<script type="text/javascript">
   $(document).ready(function() {
       $("h1#mostra").click(function() {
           $("div#oculto").fadeIn("fast");
       });
   });
   </script>

Para ocultar, deveríamos criar um outro elemento (p, h3, etc)... Exemplo:

<script type="text/javascript">
   $(document).ready(function() {
       $("h2#oculta").click(function() {
           $("div#oculto").hide();
       });
   });
   </script>

Agora vamos fazer com que possamos usar o mesmo elemento (h1#mostrar) para exibir e ocultar o elemento oculto. Para podermos adicionar mais de um evento "click" em um elemento, usamos o evento "toggle". ficaria assim:

<script type="text/javascript">
   $(document).ready(function() {
       $("h1#mostra").toggle(
           function() {
               $("div#oculto").fadeIn(); // ou slideDown()
           },
           function() {
               $("div#oculto").fadeOut(); // ou slideUp()
           }
       );
   });
   </script>

Bom, é isso, espero ter ajudado...

Veja aqui o exemplo online

Referências:

jQuery.com

Documentação jQuery

Eventos jQuery

http://docs.jquery.com/Effects

abraços!

Outubro 14, 2008

Cassiano, muito bom o tuto, porém, eu tenho uma dúvida.

Não tem como ligar o id da div com o link, por exemplo:

<a href="#teste">teste</a> (link para mostrar/ocultar a div)

<div id="teste>teste</div> (div oculta)

Tem como isso? Ligar o endereço com a id, colocando efeito de fade?

Valeu brother!

KaKarotto · Outubro 15, 2008

Tem sim, só que você precisaria ter certeza de que o link que está manipulando tem um "#" e depois dele tem só o id do div.

Ficaria assim:

<ul id="menu">
	<li><a href="#teste1">Link</a></li>
	<li><a href="#teste2">Link</a></li>
	<li><a href="#teste3">Link</a></li>
</ul>
	<div id="teste1">AAAAAAAAAAAAAAAA</div>
	<div id="teste2">BBBBBBBBBBBBBBBBBB</div>
	<div id="teste3">CCCCCCCCCCCCCCCCCC</div>

$(document).ready(function() {            
   $("a").toggle(
       function() {
            var href = this.href.replace(/(.*\#)/, '')
           $('#' + href).fadeOut(); // ou slideDown()
       },
       function() {
            var href = this.href.replace(/(.*\#)/, '')
           $('#' + href).fadeIn(); // ou slideUp()
       }
    );
});

Aí você pegaria o id do div e faria o efeito fadeOut ou fadeIn.

baron000 · Novembro 27, 2008

Beleza de tutorial... mas me tira uma duvida de noobie total?

Como eu posso fazer para que ao clicar um link você possa esconder e/ou mostrar vários divs ao mesmo tempo usando o Jquery?

Exemplo... tenho 3 links um para um div Biografia, outro para Galeria e outro para Contatos.

Ao clicar no link biografia eu quero que mostre apenas o DIV Biografia e que esconda os outros e por ai vai.

Valeu!!!

KaKarotto · Novembro 29, 2008

Baron, você poderia criar um relacionamento entre os elementos.

Considerando este html:

<ul class="menu">
	<li><a href="#" class="biografia">Biografia</a></li>
	<li><a href="#" class="galeria">Galeria</a></li>
	<li><a href="#" class="contatos">Contatos</a></li>
</ul>


<div class="conteudo">
	<div class="biografia">
		Biografia
	</div>
	<div class="galeria">
		Galeria
	</div>
	<div class="contatos">
		Contatos
	</div>
</div>

O Jquery poderia ser montado assim:

$(document).ready(function(){
    $('.menu a').click(function(){
        $('.conteudo div').hide().parent().find( '.' + this.className ).show()
        return false
    })
})

Primeiramente você daria um display:none nas divs dentro da div conteúdo com Css: .conteudo div{display:none}

Depois faria aparecer o div de mesma classe do link. Simples assim =D.

Aí é só pesquisar sobre as formas de se fazer aparecer um elemento, tem vários efeitos legais...só dar uma lida na documentação.

Abraço.

vccrespo · Dezembro 18, 2008

Olá, vocês poderiam me ajudar com isso???

A sua solução, postada anteriormente - pelo Kakaroto - funcionou muito bem para min. Porém, preciso de ter essa funcionalidade em cascata - se é assim que devo chamar. Eu explico...

Quando clicar em um link, abre a div desse link, ok? Mas dentro dessa div que irá se abrir, devo ter outro link p/ abrir outra div com um texto longo - uma descrição.

Eu dupliquei o codigo que você fez mas não deu certo.

$('.menu a').click(function(){
        $('.conteudo div').hide().parent().find( '.' + this.className ).show()
        return false;
})

<ul class="menu">
  <li><a href="#" class="biografia">Biografia</a></li>
  <li><a href="#" class="galeria">Galeria</a></li>
  <li><a href="#" class="contatos">Contatos</a></li>
</ul>

<div class="conteudo">

    <div class="biografia" style="display:none">Biografia </div>
    <div class="galeria" style="display:none">Galeria </div>
    <div class="contatos" style="display:none">
        <span>CONTATOS COM SUB_CONTEUDO</span>
        <ul class="sub_menu">
            <!-- quando clicar no link abre o conteudo do subconteúdo abaixo-->
            <li><a href="#" class="email">E-mail</a></li>
            <li><a href="#" class="telefone">Telefone</a></li>
            <li><a href="#" class="sinal de fumaça">Outros</a></li>
        </ul>

        <div class="sub_conteudo">
            <div class="email" style="display:none">E-mail</div>
            <div class="telefone" style="display:none">Telefone</div>
            <div class="telefone" style="display:none">Outros</div>
        </div>
    </div>
</div>

Outra dúvida... Teria como implementar dois botões, "Avançar" e "Voltar" para ir passando pelas DIV's???

Irei ler sobre Jquery, mas esse problema é urgente para min.

Agradeço muito desde já

Victor

vccrespo · Dezembro 18, 2008

Olá, vocês poderiam me ajudar com isso???
A sua solução, postada anteriormente - pelo Kakaroto - funcionou muito bem para min. Porém, preciso de ter essa funcionalidade em cascata - se é assim que devo chamar. Eu explico...
Quando clicar em um link, abre a div desse link, ok? Mas dentro dessa div que irá se abrir, devo ter outro link p/ abrir outra div com um texto longo - uma descrição.
Eu dupliquei o codigo que você fez mas não deu certo.
$('.menu a').click(function(){
        $('.conteudo div').hide().parent().find( '.' + this.className ).show()
        return false;
})
<ul class="menu">
  <li><a href="#" class="biografia">Biografia</a></li>
  <li><a href="#" class="galeria">Galeria</a></li>
  <li><a href="#" class="contatos">Contatos</a></li>
</ul>
<div class="conteudo">

    <div class="biografia" style="display:none">Biografia </div>
    <div class="galeria" style="display:none">Galeria </div>
    <div class="contatos" style="display:none">
        <span>CONTATOS COM SUB_CONTEUDO</span>
        <ul class="sub_menu">
            
            <li><a href="#" class="email">E-mail</a></li>
            <li><a href="#" class="telefone">Telefone</a></li>
            <li><a href="#" class="sinal de fumaça">Outros</a></li>
        </ul>

        <div class="sub_conteudo">
            <div class="email" style="display:none">E-mail</div>
            <div class="telefone" style="display:none">Telefone</div>
            <div class="telefone" style="display:none">Outros</div>
        </div>
    </div>
</div>
Outra dúvida... Teria como implementar dois botões, "Avançar" e "Voltar" para ir passando pelas DIV's??? Irei ler sobre Jquery, mas esse problema é urgente para min. Agradeço muito desde já Victor

Bom, sobre como ocultar/exibir div's dentro das DIV's principais, a solução estava bem acima, postada pelo cassiano - (foi mal galera, na proxima eu presto mais atençao e testo os códigos antes...)

<script type="text/javascript">
   $(document).ready(function() {
       $("h1#mostra").toggle(
           function() {
               $("div#oculto").fadeIn(); // ou slideDown()
           },
           function() {
               $("div#oculto").fadeOut(); // ou slideUp()
           }
       );
   });
   </script>

Agora só falta implementar os botões "VOLTAR" "AVANÇAR", para navegar pelas DIV's ...

Entrar

show/hide de elementos com jQuery

Pergunta

cassianooliver

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

Guest kiots

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

baron000

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

vccrespo

Link para o comentário

Compartilhar em outros sites

vccrespo

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades