jQuery – Accordion

Um belo dia precisei implementar um accordion em um site que estava desenvolvendo. Decidi que iria implementá-lo por conta própria, sem passar pelas mãos do programador.

Instintivamente pensei em fazer usando jQuery, por conta da velocidade e quantidade de coisas prontas. A demora foi só o google me fornecer uma resposta :]

Após avaliar as opções decidir usar a versão disponóvel no site do jQuery

A primeira coisa feita é atribuir a função de clique aos h3 que sejam antecedido por um li filho de um elemento de classe accordion:

$('.accordion li h3').click(function()

Em seguida, esconde-se todos os elementos filhos do li que são precedidos pelo h3. Vale salientar que o método next(); captura o elemento próximo ao especificado, no nosso caso o h3. Logo, se existir mais de um elemento, ele não será ocultado.

$('.accordion li h3').next().hide('slow');

Nessa linha é informado que o próximo elemento a ação de exibir através do método toggle():

$(this).next().toggle('slow');

Finalizando, essa instrução faz com que o primeiro elemento antecedido pelo h3 seja escondido:

.next().hide()

O código final está abaixo:


$(document).ready(function(){
  function accordion(){
    $('.accordion li h3').click(function() {
      $('.accordion li h3').next().hide('slow');
      $(this).next().toggle('slow');
      return false;
    }).next().hide()
  }
  function start(){
    accordion();
  }
  start();
});

Para conferir o exemplo funcionando, clica aqui

download do exemplo