JS-0310 - JavaScript Completo ES6 - Accordion List

JS-0310 - JavaScript Completo ES6 - Accordion List
Publicado em 05/02/2021 17h58
Visualizações: 681

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()):

JS-0310 - JavaScript Completo ES6 - Accordion List

Agora estamos prontos para o Accordion List!

Os elementos que serão manipulados serão da seção FAQ.

JS-0310 - JavaScript Completo ES6 - Accordion List

Para selecionar os elementos, será incluída na tag dl uma classe qualquer para seleção. Irei colocar a classe js-accordion:

JS-0310 - JavaScript Completo ES6 - Accordion List

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.

JS-0310 - JavaScript Completo ES6 - Accordion List

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:

JS-0310 - JavaScript Completo ES6 - Accordion List

Resultado final:

JS-0310 - JavaScript Completo ES6 - Accordion List

Para visualizar o projeto em andamenteo, clique aqui.

Para baixar o projeto, clique aqui.

 

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.