JS-0310 - JavaScript Completo ES6 - Accordion List
Revelando e ocultando conteúdo com um clique!
Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.
Accordion List é uma lista de itens empilhada verticalmente, que ao ser clicada, revela ou oculta um conteúdo associado a cada elemento desta lista. É uma das várias maneiras de apresentar conteúdo aos usuários progressivamente.
Inicialmente, em continuidade ao post JS-0309 - JavaScript Completo ES6 - Navegação por Tabs, iremos isolar a execução da navegação por tab, para permitir uma melhor organização no código e preservação do seu escopo, transformando-a em uma função (tabNav) e ativando-a na sequência (tabNav()):
Agora estamos prontos para o Accordion List!
Os elementos que serão manipulados serão da seção FAQ.
Para selecionar os elementos, será incluída na tag dl uma classe qualquer para seleção. Irei colocar a classe js-accordion:
Esta classe será a referência para selecionar cada pergunta da lista e, através desta, apresentar e ocultar as respostas.
A função, batizada de accordion, tem como objetivo, adicionar ou retirar a classe active definida no css, que apresentará o elemento de tag dd relacionado ao seu elemento antecessor (dt). Ao clicar no dt, o seu dd ficará visível (display block) e os demais ficarão ocultos (display none). Por padrão, estes elementos terão como atributo inicial o display none, exceto o primeiro, e depois será realizado a troca de display no clique.
O estilo em css que será utilizado para permitir esta implementação será de acrodo com a imagem abaixo. Além do display, será adicionada uma seta, para indicar que há conteúdo no item relacionado e uma suavização no display através de uma animação de keyframe. A seta utilizada é padrão ASCII, obtida aqui.
Para adicionar e remover a classe do elemento seguinte do target, será utilizada a propriedade nextElementSibling do elemento, bem como um classList.toggle, para incluir e excluir a classe "active" conforme o elemento possua ou não. O this (dt) também receberá o toggle classe active, para trocar a seta (seta para cima).
No script, iremos selecionar em uma constante accordionList todos os elementos com a tag dt pertencentes a lista, utilizando o método document.querySelectorAll('.js-accordion dt'). Esta seleção conterá um NodeList com as três dt da seção. Assim como a navegação por tab, o primeiro item da lista deverá estar visível, com display block, então será utilizado o mesmo método de tab, carregando o primeiro elemento da lista com a classe active já adcionada.
Para prevenir um erro na eventual ausência de elementos do accordionList, foi inserido um if após a seleção. Caso exista, para cada elemento desta lista, utilizando o método forEach, será adicionado um evento de clique, que acionará a função accordion:
Resultado final:
Para visualizar o projeto em andamenteo, clique aqui.
Para baixar o projeto, clique aqui.
