O accordion, também conhecido como “menu sanfona”, serve para estruturar conteúdo em tópicos. Ele é bem simples de fazer, a maioria das pessoas que visitam devem saber fazer de olhos vendados. E com a biblioteca jQuery no seu site, é possível fazer um accordion com apenas 5 linhas de código.
Veja os exemplos que também ensinam como fazer:
O código em jQuery
$(document).ready(function(){
$('h2.accordion').click(function(){
$(this).parent().find('div.accordion').slideToggle("slow");
});
});
A estrutura em html
<div class="exemplo"> <h2 class="accordion">Título/h2> <div class="accordion"> <p> texto de descrição </p> </div> </div>
O CSS
na verdade é somente duas linhas de css que são obrigatórias:
h2.accordion{ cursor: pointer; }
div.accordion{ display: none; }
Danilo é coordenador de interface da AdBat/Tesla, é Corinthiano e Vegan. Gosta de correr, de jogar xadrez, tênis, e futebol de videogame (no futebol de verdade ele é muito ruim). Programa de dia na AdBat/Telsa e de noite no 
October 10th, 2009 at 4:33 pm
ÓTIMOOO ♥
February 15th, 2010 at 11:41 am
Excelente!!
March 10th, 2010 at 2:41 am
Danilo, otimo tutorial, teria como você ensinar a não esconder o primeiro item?
ou seja esconder os outros e deixar o primeiro aberto, qdo clicar no segundo fechar o primeiro e assim vai..
April 11th, 2010 at 9:57 pm
Código perfeito! Fácil de configurar. Em 5 minutos estava funcionando. Salvou meu domingo!
April 25th, 2010 at 2:00 am
Cara, te amo ♥ … ahsuhasudaushda
Salvou meu domingo tbm …
fazia uns 2 meses que eu estava quebrando a cabeça com mootools pra misturar com Jquery .. e em apenas 1 minuto após ler este post, reciclei minha pagina de FAQ …
Te Adoro Cara .uAHUhauhahuh
( Dale SANTOS \o/ _o_ \o/… )
May 18th, 2010 at 11:01 am
Fiz tudo direitinho e não funcionou…
September 13th, 2010 at 6:22 pm
muito bom cara!!!
September 22nd, 2010 at 12:20 pm
Perfeito, amigo.
Só corrige ali o teu html, no momento em que você fecha o h2.
Do mais, sucesso e parabéns pelo blog.
@caviegas
October 6th, 2010 at 3:50 pm
Muito bacana.
Só uma correção: o termo Accordion é usado quando um item some para o outro aparecer. A forma que você mostrou é mais conhecida como hide/show ou algo assim.
February 25th, 2011 at 6:09 pm
Parabénssss!!
Ótimo tutorial, simples, fácil e ágil.
Já implementei no site :)
Abs
March 15th, 2011 at 1:49 pm
Olá, muito bom tutorial, funciona de forma perfeita e é muito simples de implementar e personalizar.
Obrigado pela dica.
August 18th, 2011 at 4:16 pm
Muito bom esse tutorial, estava aqui tentando implementar esse tipo de accordion na versão mobile do portal do tribunal, e utilizando plugins cheios de kb, quando eis que encontro esse simples tutorial.Perfeito. Muito obrigado kra por compartilhar esse tutorial.
September 22nd, 2011 at 11:44 am
[...] Fonte: tidbits.com.br [...]
October 3rd, 2011 at 2:07 pm
Nossa muito obrigado!!!! valeu cara
October 28th, 2011 at 7:39 am
Eu baixei o jquery mas nao funcionou. Voce pode disponibilizar o arquivo para download?
October 28th, 2011 at 4:04 pm
Cara, procurei uma solução dessa por horas! A tua foi excelente, to fazendo um menu com o wp_list_categories do wordpress com ela pra ficar collapsible. Mto obrigado!
November 8th, 2011 at 8:13 am
Cara, seu exemplo ficou muito bom.
Apenas uma sugestão:
Na linha:
$(this).parent().find(‘div.accordion’).slideToggle(“slow”);
Eu gostaria de trocar por:
$(this).next(‘div.accordion’).slideToggle(“slow”);
Na forma que está especificado eu tive problemas no chrome ao utilizar mais de 1 elemento de listagem (no seu caso o h2 e a div). Ao executar o segundo ou o terceiro, ele forçava o primeiro grupo a ser exibido. usando next contornei o problema. Abraço e muito obrigado!
November 10th, 2011 at 10:32 pm
Olá Danilo,
O seu código é bem fácil, mas o mesmo apresenta problemas quando se usa ele com 2 accordions seguidos no IE7.
Quando se clica no h3, o IE reage quebrando os espaços entre os accordions, deixando colocados… é como se desse um erro e a estrutura css que amarra os accordions se quebrasse e tudo ficasse agarrado. No Chrome e no FF funciona perfeitamente.
Sabe me dizer se existe algum recurso para corrigir isso no IE ?
Abraços,
Marcelo.