Como fazer Accordion Simples com jQuery em 5 linhas de código

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; }

34 thoughts on “Como fazer Accordion Simples com jQuery em 5 linhas de código

  1. 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..

  2. Código perfeito! Fácil de configurar. Em 5 minutos estava funcionando. Salvou meu domingo!

  3. 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/… )

  4. 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.

  5. Olá, muito bom tutorial, funciona de forma perfeita e é muito simples de implementar e personalizar.

    Obrigado pela dica.

  6. 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.

  7. Pingback: Como fazer Accordion Simples com jQuery em 5 linhas de código : FernandoMoreira - Webdesigner e Programador

  8. 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!

  9. 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!

  10. 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.

  11. Opa! meus parabéns… muito legal….

    Você pode me ensinar como fazer dois botões, um que abre todos os accordeon e outro que feche todos…

    Obrigado… fico no aguardo…

    Abraço….

  12. Olá, muito bom o post, bem simples e facil de implementar, só gostaria de deixar uma sugestão, na linha do efeito:
    $(this).parent().find(‘div.accordion’).slideToggle(“slow”);
    seria bom colocar um .stop() pra evitar fique repetindo caso cliquem varias vezes. fica assim:

    $(this).parent().find(‘div.accordion’).stop().slideToggle(“slow”);

    abraço!

  13. faz o seguinte… pra esconder quando clicar no outro menu…
    $(‘div.accordion’).click(function(){
    $(‘ul.accordion:visible’).slideUp(“fast”);;
    $(this).parent().find(‘ul.accordion’).attr(‘id’,’active’).stop().slideToggle(“fast”);
    });

  14. Grande presença… excelente, eu tava num aperto aqui na agencia e abri um tuto com uma explicação gigante e esse teu aqui, em menos de 2 minutos tava pronto o accordion.

    Larga mais uns ae pra galera.

    abraço

  15. Olá, implementei o código abaixo e agora não consigo fazer o mais important para a minha aplicação. Gostaria que ao clicar nem uma opção de radio, a lista atual fechasse e a próxima lista teria que abrir.

    Por favor me ajudem!

    Segue o código abaixo:

    Accordion Sem Publin

    jQuery().ready(function(){
    //$(‘.content’).not(‘:first’).hide();
    $(‘.content’).hide();

    $(‘h3’).click(function(){
    $(‘.content’).slideUp(‘normal’);
    $(this).next().not(‘:visible’).slideDown(‘normal’);
    });

    $(‘:radio’).click(function(){
    $(‘.content’).slideUp(‘normal’);
    })

    });

    *{padding:0; margin:0;}
    ul{width:250px; margin:150px auto;}
    ul li{list-style:none; margin:0 0 3px 0; background:#CCC; display:block; cursor:pointer; padding:4px 5px 3px 5px;}
    ul li:hover{background:#DDD;}
    ul li h3{background:#AAA; padding:2px; color:#FFF; margin:0 0 3px 0; display:block;}

    Cores

    cor: 4/4
    cor: 4/1
    cor: 4/0

    Quant.

    500 unid:
    1000 uni:
    2000 uni:

    Acab.

    Verniz Local 4/4:
    Verniz Total 4/0:
    BOPP:

  16. alterei o código para abrir uma aba de cada vez e ficou assim:

    $(document).ready(function(){
    $(‘h3.accordion’).click(function(){
    $(‘div.accordion:visible’).slideUp(“fast”);
    $(this).next(‘div.accordion’).slideToggle(“slow”);
    });
    });

  17. Pessoal usei o código acima, e coloquei um form dentro da div accordion mas toda vez que clico para preencher, o form a div fecha. Alguem pode me ajudar?

  18. Uma solução simples, elegante e, o principal, que funciona! Meus parabéns e obrigado!

Leave a Reply

Your email address will not be published. Required fields are marked *