Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Efeito jQuery toggle para revelar e esconder

Publicado em: 2009-06-22 — 19.230 visualizacoes

Um dos efeitos mais empregados em desenvolvimento com uso da biblioteca jQuery é aquele que proporciona ao usuário a escolha de revelar e esconder conteúdos.

Neste tutorial vou mostrar os fundamentos da técnica que fazem funcionar este efeito, desenvolvendo um exemplo prático no qual mostrarei como fazer seu script não obstrutivo e um pequeno plugin que se destina a fazer a mudança do texto que o usuário deverá clicar para Revelar ou Esconder o conteúdo.

O efeito revelar/esconder carrega consigo implicitamente as seguintes facilidades

  • é simples e fácil de ser projetado;
  • requer cuidados mínimos para ser “não obstrutivo”;
  • permite inserir muito conteúdo em pouco espaço;
  • facilita a visualização e entendimento dos conteúdos;
  • proporciona interação agradável com o usuário;
  • cria impacto visual interessante.

Desenvolvi um exemplo prático que ilustra as técnicas aqui demonstradas. O exemplo encontra-se em: Revelar e esconder conteúdos com jQuery.

Como funciona?

A estrutura de marcação HTML necessária para o funcionamento do efeito consiste, basicamente, em se marcar um texto curto, uma palavra ou mesmo um símbolo que servirá de “chave”, a ser clicado pelo usuário, para fazer o efeito funcionar, ou seja revelar e esconder o conteúdo. A chave referida é de duas posições tal como são os interruptores de corrente elétrica destinados a acender e apagar luzes.

Os textos curtos que definem as posições da chave normalmente são: “revelar/esconder”, “ver/ocultar”, “abrir/fechar” “mostrar/esconder” ou ainda os símbolos “+/-”, etc.

Em seguida à chave encontra-se a marcação dos conteúdos a revelar/esconder. Estes conteúdos devem ser inseridos com marcação HTML semântica apropriada e, obviamente, variável com o tipo de conteúdo.

Inicialmente é apresentada ao usuário uma página contendo uma lista de chaves na posicão “Revelar” que ao serem clicadas revelarão o conteúdo a seguir e ao mesmo tempo mudarão a chave para a posição “Esconder”. Sempre que o usuário clicar uma chave para revelar e existir um conteúdo que tenha sido revelado anteriormente este deverá ser escondido.

Marcação HTML

Observe a marcação HTML que foi desenvolvida para o exemplo que ilustra esta matéria.

<div id="box-toggle">

<div class="tgl">
   <h2>Conteúdo um</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

<div class="tgl">
   <h2>Conteúdo dois</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

<div class="tgl">
   <h2>Conteúdo três</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

</div>

No exemplo criamos três blocos de conteúdos a revelar/esconder. Os textos das chaves não foram marcados diretamente no HTML. Eles serão criados com JavaScript como veremos a seguir. Fizemos assim para que as chaves não apareçam quando a página for renderizada com JavaScript desabilitado. Outro cuidado que devemos ter é não esconder inicialmente os conteúdos a revelar com uso de folhas de estilo. Se assim fizermos iremos bloquear o acesso aos conteúdos em navegadores com JavaScript desabilitado. Esconda os conteúdos com declaração CSS definida com JavaScript.

Os dois cuidados mencionados acima fazem com que seu script retire da marcação as chaves e não bloqueie acesso aos conteúdos quando JavaScript e/ou CSS estiverem desabilitadas no navegador. E, infelizmente a quase totalidade dos scripts para produzir o efeito revelar/esconder que tenho encontrado na web não levam em conta estas duas considerações. Colocam, equivocadamente, a chave diretamente na marcação e escondem conteúdos com regras CSS em folhas de estilo.

Notar ainda que os conteúdos foram inseridos dentro de um div com a classe tgl e a área que contém os três conteúdos foi inserida dentro de um div geral com id box-toggle.

Script jQuery

<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('Revelar conteúdo');
$('.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('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>

Código comentado

Linha Descrição
2 Sintaxe para criar um método personalizado denominado toggleText que executa uma função admitindo dois parâmetros, a e b. Cria um pequeno plugin.
3 O método criado verifica qual é conteúdo HTML textual de um elemento entre os dois fornecidos nos parâmetros da função e troca um pelo outro. Considere, por exemplo, a=Revelar e b=Esconder para entender o funcionamento da função.
7 Criamos, com script, a marcação HTML para a chave revelar/esconder com o valor inicial revelar e a inserimos antes dos conteúdos a revelar div.tgl.
8 Escondemos os conteúdos a revelar com declaração CSS no script.
9 Atrelamos o evento click às chaves.
10 Clicando a chave a visibilidade do conteúdo imediatamente a seguir é trocada. Se escondida é revelada e vice-versa.
11 Ao mesmo tempo qualquer dos conteúdos vizinhos que estejam revelados serão escondidos.
13 Alterna Revelar com Esconder.
14 e 15 Troca Esconder por Revelar para conteúdos vizinhos que estejam revelados e foram escondidos conforme descrito para a linha 11.

O exemplo que ilustra este tutorial encontra-se em: Revelar e esconder conteúdos com jQuery.

Créditos para o pequeno plugin Autor: Matt Kruse

Retweet this post

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

capa livro html      capa livro html      capa livro html      capa livro html

Logo twitter

Enquete

  • Lamento. Não há enquetes no momento.

Esta matéria foi publicada em: 2009-06-22 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/06/22/efeito-jquery-toggle-para-revelar-e-esconder/trackback no seu site.



28 comentários na matéria: “Efeito jQuery toggle para revelar e esconder”

  1. Sérgio RodriguesNo Gravatar disse:

    muito interessante, legal mesmo esta função….tanto que o dream cs3 já vem com códigos jQuery, inclusive esse!

  2. Matheus AndradeNo Gravatar disse:

    Show de bola!!!!!

  3. Renato TavaresNo Gravatar disse:

    Muito bom mesmo :)

  4. Diego MarquesNo Gravatar disse:

    Muito bom este tutorial, parabens.

    Só um detalhe, na animação de quando abre, no final ele dá um pulo, pelo menos onde eu testei que foi no firefox 3.5 e no chrome.

    Como resolver isto?

  5. GutoNo Gravatar disse:

    Muito bacana o recurso, já vou utilizá-lo em projetos.

  6. Pedro MagalhãesNo Gravatar disse:

    Gostei muito, principalmente por usar jQuery! Continue por favor :)

  7. SimeoniNo Gravatar disse:

    Ola eu testei tbm e deu um erro:

    Erro: this.html() is null
    Arquivo-fonte: http://www.maujor.com/blog/pg_apoio/jquery-toggle-texto-exemplo.html
    Linha: 26

    ja pesquisei mas nao encontrei nada de como resolver isso, alguem sabe?

    Muito bom o artigo!

  8. Mauro GeorgeNo Gravatar disse:

    @ Diego Marques

    Vi o mesmo problema no firefox 3 e nos IEs 6 e 7.

    A diferença é que nos IEs o “pulo” ocorre proximo ao h2 pois apos clicar em “revelar conteudo” o h2 está colado no texto “revelar conteudo” e depois ocorre o pulo criando a sua margem.

    Já no Firefox o “pulo” ocorre na parte inferior entre o final do paragrafo eo próximo “revelar conteudo”.

    Porém também queria saber como resolver o problema.

  9. WashingtonFrancaNo Gravatar disse:

    E ae , muito bom estava pesquisando esse evento e no seu tutorial tive a explicação , porém surgiu um dúvida.Estou criando um sistema web, e minha intenção seria no momento eu que eu click no botão, aparece um formulário de cadastro. dentro desse formulário, tb teria abas onde eu clik e aparece e esconde outro formulário de cadastro.
    Seria possivel usar essa tecnica, para tal resultado?
    agradeço e aguardo

  10. EmanueleNo Gravatar disse:

    Baah.. muito show o tutorial!!!

    Testei aqui e funciona as mil maravilhas!! ^^
    Já coloquei no site e tudo mais..

    Muito Obrigada o/

  11. William LimaNo Gravatar disse:

    Estou tentando colocar este codigo no meu site estou usando wordpress, faço tudo certo clico em visualizar e funciona mais na hora que publico a pagina ele nao funciona mais, percebi que se colocar o perma link como “default” o codigo funciona mais quando coloco como “day and name”, o codigo passa a nao funcionar, sera que alguem pode me ajudar obrigado!!!!!

  12. LuisNo Gravatar disse:

    Ola, se eu clicar no botao varias vezes seguidas antes de terminar a animacao ele vai continuar fazendo ate terminar a quantidade de cliques que eu dei, tem como travar o botao ou uma tag “a” ate a animacao completar?
    valeu

  13. RicardoNo Gravatar disse:

    Olá eu gostaria de saber como fazer o toggle com o live poi eu crio uma div com jquery e esta função de toggle em um link no meio da div..

    exemplo, eu crio atraves do jquery o seguinte:

    Usra o Toggle

    ai eu crio uma função jquery q pega o id taltal e quando clicka aparece algo e quando clickar aparece ou esconde algo…

    Ai é que está o problema… se o “Usra o Toggle” ja estiver criado quando carrega a pagina ele funciona só q se for criado depois ele não funciona mais..

    correção: Usar a função live, porem alguem sabe fazer isso pra toggle?

    Abraços

  14. MaujorNo Gravatar disse:

    @Ricardo
    A sintaxe para uso de live é a seguinte:

    $('span', '#box-toggle').live('click', function() {
    $(this).next().slideToggle('slow')
    ...
    });

  15. VictorNo Gravatar disse:

    EXELENTE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Só uma dúvida como altero a palavra ou símbolo que serve para ocultar o texto, pq, quando eu altero alguma destas palavras ou um destes símbolos, só aparece, o de revelar texto, como soluciono?

  16. VictorNo Gravatar disse:

    tem mais um probleminha. No IE. aparece sempre a notificação de erro na página, mais especificamente desta forma
    Detalhes dos erros da página da Web

    Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB5; SIMBAR={8EEDD465-056D-4D32-A58D-DB1F6001233B}; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; InfoPath.2; WWTClient2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
    Carimbo de data/hora: Thu, 17 Sep 2009 20:20:06 UTC

    Mensagem: ‘this.html()’ é nulo ou não é um objeto
    Linha: 26
    Caractere: 1
    Código: 0
    URI: http://www.maujor.com/blog/pg_apoio/jquery-toggle-texto-exemplo.html

    Teria alguma forma de se resolver isto
    abraços

  17. Rafael BuyNo Gravatar disse:

    Dessa forma o this.html() nulo não aparece.

    jQuery.fn.toggleText = function(a,b) {

    if (this.html() != null) {
    return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function {return(x==a)?b:a;}));

    }
    }

    ;)

  18. AlexandreNo Gravatar disse:

    Achei seu blog através do google, procurando por jquery.
    Seu blog é muito bacana e informativo.

    Queria que você me ajudasse numa questão que deve ser
    extremamente simples para você, mas que para mim já custou
    dias de pesquisas e até hoje não encontrei a solução.

    Estou criando esse site:
    http://www.alexandre-oliveira.com/testes/oralgraf/
    e no link “PRODUTOS” gostaria que fosse exatamente
    igual ao link “VEJA TODOS OS 38 DEPARTAMENTOS”,
    do site “AMERICANAS.COM”. Consegui chegar próximo
    com jquery, mas quando eu tiro o mouse de cima do link
    “PRODUTOS” a div some e eu preciso que ela se comporte
    como no site da Americanas. Essa div não pode sumir
    porque terá outros links e informações dentro dela.

    Se você puder me ajudar ou dar alguma ideia eu ficaria
    muito agradecido.

    Obrigado

  19. João AntonioNo Gravatar disse:

    Olá Sr. Maujor…

    Estou tentando utilizar esse exemplo do blog com shadow box para mostrar e ocultar as divs que contém os Tumbs da galeria…porém quando faço com que o shadow funcione o jquery para de funcionar pode me ajudar?

  20. jaimiNo Gravatar disse:

    PARABÊNS, muito bom !!!
    Uma dúvida apenas.
    Como faço para alterar o conteúdo do ?
    por exemplo:
    (mostrar/alterar) meus arquivos
    (mostrar/alterar) meus projetos
    (mostrar/alterar) meus desenhos

    Agradecido e aguardo contato.

  21. roberto araujoNo Gravatar disse:

    ola jovem !! queria saber como esconder marcador e arquivo ?
    uso a funcao mostrar tudo e a mostrar oculto fonciona +++ nao serve os como link eles egistem + nao aparece exp:.blogspot.com/search/label/cafe

  22. jaimiNo Gravatar disse:

    ROBERTO, a minha dúvida é a seguinte:
    ———-

    —– assim existe, como faço para que ao invés de aparecer
    mostrar conteudo
    mostrar conteudo
    mostrar conteudo

    —– aparecer
    mostrar meus arquivos
    mostrar meus projetos
    mostra meus desenhos

    agradecido uma vez mais (1*+)
    aguardo

  23. Louise NzarethNo Gravatar disse:

    Olá, Maujor!

    Muito bom este script, super mão na roda!
    Porém, no IE6 não funcionou… =(
    O que será que está errado?

    Tks!

  24. DanielNo Gravatar disse:

    Tem como o “conteúdo um” já aparecer aberto?

  25. jaimi passosNo Gravatar disse:

    :-( ( fiquei 100 ação/resposta :-) )

  26. Michel de WitteNo Gravatar disse:

    Tem como colocar “n” funções, tipo, se eu coloco mais de um na mesma pagina da erro, eu gostaria de expandir para quantas vezes fosse necessario.

  27. EstherNo Gravatar disse:

    tentei fazer e não funcionou no firefox 3.5 e nem no ie 8, estou usando o windows 7, outros scripts js funcionam normalmente, o que pode ser?

  28. NatanaelNo Gravatar disse:

    Muito bom exemplo, sem contar que jquery é quase indispensavel no desenvolvimento agil.

    Esse efeito ai eu uso com frequencia em algumas areas dos sites que faço, bacana.

Comentário:






Subscrição de comentários sem comentar

Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Voltar ao topo

PR Tool


ir topo