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

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Você pode se interessar também por:

Postado por Danilo em Javascript | 6 Respostas »

6 Responses to “Como fazer Accordion Simples com jQuery em 5 linhas de código”

  1. 1
    Anderson Says:
    October 10th, 2009 at 4:33 pm

    ÓTIMOOO ♥

  2. 2
    Alexandre Says:
    February 15th, 2010 at 11:41 am

    Excelente!!

  3. 3
    marco riesco Says:
    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..

  4. 4
    Sammy Newton Says:
    April 11th, 2010 at 9:57 pm

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

  5. 5
    Luiz Says:
    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/… )

  6. 6
    Viviane Says:
    May 18th, 2010 at 11:01 am

    Fiz tudo direitinho e não funcionou…

Leave a Reply