Neste blog, vou criar um acordeão usando javascript nativo. Nenhuma biblioteca como jQuery é necessária. JQueryUI tem um componente de acordeão incorporado, que é ótimo de usar. Mas como um desenvolvedor responsável, também devemos saber como criar um com javascript puro. Se você não sabe o que é acordeão então olhe jquery one aqui.
Dividamos o componente em pequenos passos.
- Acordeão contém lista de painéis.
- Cada painel tem dois componentes, cabeçalho & corpo.
- O componente de cabeçalho de todo o painel é sempre visível.
- Um painel pode ser expandido ou colapsado.
- Quando um painel é expandido, o seu componente de corpo torna-se visível.
- Apenas um painel pode ser expandido de cada vez.
- Quando outro painel é expandido, o componente corporal do último painel se esconde.
Vamos construir o componente com pequenos passos.
Passo1 :- Desenho HTML básico
Vamos criar algum html básico que cria lista de painéis com cabeçalho & body.
Acima de html contém lista de painéis. Cada painel tem cabeçalho e item de corpo. Atualmente tudo é visível.
Passo2 :- Definir alguns CSS para lidar com a visibilidade
Vamos criar duas classes CSS para definir a visibilidade do corpo.
Por padrão, queremos esconder todo o corpo do painel conforme o requerimento. Agora precisamos mostrar apenas elementos expandidos de cada vez. Vamos adicionar classe ativa no painel div para tornar o corpo visível.
Passo3 :- Usando CSS no HTML
Após adicionar CSS no nosso HTML, o código será
Agora todo o corpo do painel está oculto, exceto o primeiro. Nós criamos nosso componente básico de acordeão. Precisamos usar algum javascript para torná-lo totalmente funcional.
Passo4 :- Adicionando eventos de clique
Adicionaremos evento de clique em cada painel, o que mudará a visibilidade do painel.
JS Fiddle link aqui
initAccordion função está definida para inicializar o componente acordion. Ele coloca um evento de clique em cada painel. Quando um painel é clicado, ele remove a classe ativa do painel ativo atual e a adiciona ao novo painel. Por padrão, ele torna o primeiro painel como ativo. Podemos fazer qualquer painel como ativo por padrão passando o elemento do painel para a função showPanel.
Criamos nosso acordeão com sucesso. Este é apenas um modelo muito básico de acordeão mas cobre a funcionalidade principal.
Podemos torná-lo mais extravagante adicionando bons estilos de css, animação e ícones. Também podemos torná-lo mais orientado à performance implementando delegação de eventos & caching de elementos activos actuais. Consulte o meu blog sobre eventos para saber mais sobre eventos em detalhe.