Como fazer um Accordion interativo | HTML, CSS e JavaScript

Oi eu sou a Lari e nesse vídeo vou te mostrar como que eu fiz esse acordeon usando HTML CSS e javscript e se tu quer aprender como que faz continua assistindo esse vídeo eu vou começar criando uma pasta aqui na área de trabalho vou chamar ela de acordon vou abrir o vs code e arrastar essa pasta aqui para dentro agora eu vou criar as pastas e os arquivos que a gente vai precisar Então vou criar aqui o primeiro arquivo que vai ser o index P HTML vou criar uma pasta que vai ser a src dentro

dessa pasta a gente vai ter a pasta Styles dentro de Styles a gente vai ter o arquivo styles.css dentro do src a gente também vai ter a pasta JavaScript e dentro dessa pasta a gente vai ter o script.js agora eu vou abrir o nosso HTML eu vou abrir ele com o Live server que é uma extensão que vocês podem baixar aqui também vou dividir a tela ao meio e agora a gente já pode começar o nosso HTML eu vou clicar no ponto de exclamação e dar um enter para criar essa estrutura padrão para nós Vou

trocar aqui o título da página para acordon e aqui eu vou trocar a linguagem para PT para sub BR já vou importar também o nosso CSS então aqui eu escrevo link e o caminho pro nosso CSS que é src bar Styles styles.css agora aqui dentro do Body a gente pode começar o nosso HTML primeira coisa que eu vou fazer vai ser criar uma div e ela vai ter o ID de container uma abreviação né para tu não precisar botar lá o ID só colocar uma hashtag aqui e o ID que tu quer e depois Dá

um enter dentro do contêiner a gente vai ter uma div que vai ser a do acordon que vai ser cada um desses acordeons aqui então eu vou colocar aqui div p acordeon que vai ser uma classe agora não um id e dentro desse acordon ele vai ter um header e um body o header seria esse cabeçalho aqui e o body seria a parte de baixo né o corpo dele dentro do acordon eu vou colocar então um botão e esse botão ele vai ter a classe de acordeon para tro header abaixo desse botão a gente vai

ter uma div ela vai ter a classe de acordon traço Body dentro do Body eu vou colocar um parágrafo que vai ser aquele texto que a gente vai utilizar dentro do Acordeon aqui eu vou botar um luren Y que é um exemplo de texto vocês podem escrever o que vocês quiserem aqui dentro e que vocês quiserem aqui na pergunta aí o accordeon body ele tá pronto Agora a gente vai pro acordeon header o acordeon heer a gente vai ter um spam que vai ser a pergunta ou alguma outra coisa que tu queira colocar aqui eu

coloquei a pergunta né O que é um acordon quebrar esse Loren aqui também para ficar um pouco mais fácil de ver abaixo do spam a gente vai ter um ícone que vai ser a dessa seta aqui a gente vai usar para isso o fonte ossum então aqui eu vou pesquisar por fonte aum CDN vou clicar nesse primeiro link aqui e vou copiar esse primeiro link aqui também no copy link tag e vou colar acima do nosso CSS e a gente já pode usar esse ícone agora então eu vou ir lá no funte osso e vou

pesquisar pelo ícone que eu quero esse aqui é o ícone chevron Down vou clicar nele e vou copiar e colar abaixo do spam o nosso HTML é apenas isso então ele já tá aqui a gente pode criar outros acordeons então a gente pode copiar e colar ele várias vezes vou deixar com o mesmo texto por enquanto depois a gente troca então a gente pode começar agora a estilizar ele então eu vou vir aqui no CSS vou colocar um asterisco vou abrir Chaves e aqui a gente vai estilizar colocar uns estilos padrões então aqui vai ser

margem zero para tirar todas as margens padrões um pading zero também para tirar todos os paddings padrões um box sizing border box e eu também vou importar uma fonte então eu vou ir lá no Google Fontes vou pesquisar pela fonte Poppins vou clicar nela e vou selecionar todas essas variações ou só as que você for usar né selecionar todas só para ter depois de selecionado é só clicar aqui em View selected Families e no Import e copiar essa partezinha aqui e colar aqui em cima depois é só usar ela aqui tem até um exemplo de

como Como usa aqui eu já tinha selecionado S Roboto também mas a gente vai usar a Poppins então eu vou copiar essa parte aqui e vou colar aqui dentro Nossa fonte ela já tá funcionando Dá um espaço aqui e agora a gente vai estilizar o body então eu vou colocar Body Abrir Chaves vou colocar uma altura mínima na nossa página de 100 VH para ela cobrir no mínimo tudo isso aqui vou também colocar um display Flex Um align item Center e um justify content Center e vou trocar a cor do fundo a cor do fundo

ela vai ser # 6366 F1 agora a gente vai customizar o container que vai ser o que vai ficar em volta dos acordeons então aqui eu vou colocar # container o container ele vai ter um display Flex um Flex Direction de colum e um GAP de 8 pixels e também vai ter uma largura de 500 pixels aqui eu vou colocar uma largura fixa só para ele ficar bonito mas na hora que tu for usar tu pode colocar uma largura nele de 100% e depois alguma outra coisa que tiver em volta tu for diminuir a largura

depende do do uso né como tu vai usar ele então eu vou deixar assim por enquanto e a gente agora vai customizar o acordeon em si então ponto acordeo eu vou colocar uma cor de fundo para ele então background color vai ser de fff ele vai ter um border radius o border radius vai ser de 8 pixels ele vai ter um pading também pading ele vai ser de 12 pixels vai ter um cursor Pointer que vai ser aquela mãozinha então aqui cursor Pointer e vai ter uma sombra também então Box Shadow de CCO pixels 5

pixels 5 pixels rgba de 0 v0 v0,0 P1 aqui eu esqueci de dar um espaço ele vai ficar assim e agora a gente vai costomizar o header então aqui eu vou colocar um ponto acordeon traço header vou colocar uma largura de 100 100% vou colocar vou tirar a borda Então vou colocar border None vou colocar um background color de transparente para ele ficar da mesma cor do corpo inteiro né vou colocar um display Flex Um align item Center e um justify content de Space between vou aumentar um pouco a fonte então eu vou colocar um

fonte size de 16 pixels vou botar também um cursor Pointer para ficar com a mãozinha nele também e agora eu vou costomizar esses aqui porque vai que eu coloco uma pergunta muito grande por exemplo aqui ó colocar vários asos assim só para vocês ver como é que fica ficou muito grande sabe então a gente precisa fazer com que quando a pergunta tiver muito grande apareça três pontinhos aqui para não ficar enorme isso né então para isso eu vou customizar o spa em si então aqui eu vou copiar esse ponto accordeon header vou colar aqui embaixo

e vou escrever Spa daí no spa a gente vai colocar que a largura máxima é de 100% e o White Space dele é de no wrap pra ele não quebrar vai ficar assim por enquanto e a gente vai colocar um overflow de hiding então overflow hiding para o espacinho dele não sair para fora né Tipo se tiver maior não sair para fora só que daí para vir os três pontinhos a gente coloca um texte overflow então texte overflow de elipses daí ele fica assim caso a pergunta for muito grande fica um pouco mais bonito né

Deixa eu tirar esse a que eu coloquei aqui aí agora a gente vai customizar o body então aqui eu vou colocar um ponto acordeon traço Body no acordeon Body a gente vai trocar a cor da fonte então a cor aqui vai ser 444 e a gente vai ter que fazer com que ele não apareça para ele ficar escondido e ele aparecer Só quando eu clicar Então já vamos esconder todos eles para isso ah deixa eu diminuir a fonte também primeiro né então fonte size de 14 pixels e agora a gente vai fazer isso então eu

vou colocar uma opacidade de zero daí ele vai ficar assim só que também tenho que colocar colocar uma altura então uma rate de zero também aí ele vai ficar assim eu poderia colocar um display None só que daí ele não vai fazer essa animaçãozinha aqui essa pequena animação então eu optei fazer com a opacidade por conta dessa animação Então como que eu faço para ele abrir eu vou ter que colocar uma classe de ativo de Active quando ele tiver clicado então para isso eu pego o accordeon body e quando ele tiver a classe Active então

a classe Active a altura ela vai ser de 100% e a opacidade vai ser de um vou colocar nesse primeiro accordeon Body aqui a Class Active para vocês verem como fica ele aberto então ele ficou assim eu esqueci de colocar um pading aqui então eu vou colocar no accordion Body um pading de C pixels e zero pixels que ele vai ficar aqui um pouquinho mais de espaçamento aí agora a gente vai ter que fazer o JavaScript e depois voltar um pouquinho aqui pro CSS então primeiro vamos lá no JavaScript fazer ele funcionar e depois a

gente ajeita Ah o pading eu não posso colocar aqui eu tenho que colocar só com quando ele tá ativado né porque senão vai pegar o pad em todos então assim então vamos lá no JavaScript agora vamos importar ele eu importo ele aqui antes do fechamento do Body então eu boto script src e o caminho que é src bar JavaScript script.js já tá importado aí agora é só fazer o script o que a gente precisa pegar é todos os acordeons então eu vou criar aqui uma variável que vai ser uma lista de acordeons para pegar todos

eles eu coloco document aqui eu esqueci de botar um igual document P query selector All e os que tiverem né a classe acordon pegando todos eles a gente vai ter que fazer um for it para passar por todos eles pegar cada um deles e adicionar um evento de clique para ver qual tá clicado então para isso eu coloco aqui acordeons ponto for each para cada acordon ele vai receber um accordeon só e vou abrir uma aon function aqui então passar uma aon function para dentro dele então aqui eu vou abrir e eu vou adicionar um

evento de clique no acordon que eu recebi num deles né Foi o que eu cliquei e vou adicionar então add event aqui é accordeon não acordeons acordon aqui Faltou um C accordeon pon Ed event listener vou adicionar um evento de clique Então abre aspas simples e escreve clique vírgula aqui eu vou abrir o Iron function também e vou criar a variável do Body porque agora a gente vai ter que pegar o body porque ele que vai receber a classe Active então aqui eu vou criar uma variável de body vou pegar ele então accordeon pon query

selector então o acordeon que for clicado ele vai pegar os que tiverem a classe accordion Body dele né do que eu cliquei a classe accordion Body daquele acordion que eu cliquei accordion Body e para aquele que eu cliquei eu tenho que adicionar a classe Active e tirar quando eu clicar então a gente pode fazer um Tug então aqui eu vou botar Body pon classlist ptg para tirar e colocar a classe quando eu clicar então a classe Active quando eu clicar ele vai adicionar e tirar a classe Active eu posso tirar aqui do HTML também aquela

classe que eu coloquei aqui porque não vai mais precisar dela já vai est funcionando o TGO assim ó agora a gente só tem que fazer a animação pra setinha ela se mexer e fazer algumas outras animações também que nem esse Fade que eu fiz aqui ó então para isso a gente vai vir aqui no CSS de novo e a gente vai botar aqui nesses ícones aqui uma classe de vou colocar em todos os ícones essa classe e agora a gente tem que pegar a classe essa classe Arrow que a gente colocou apenas que tiverem a

a classe Active então para isso eu coloco assim ó ponto acordeon braço Body dois pontos S PR se o accordeon body tiver a classe Active a Arrow então ponto Arrow ela a gente faz uma animação né então transforme rotate de 180 deg 180º ah perdão aqui não é acordon Body é acordon porque é quando tiver dentro do acordon algum com a classe Active o a seta vai fazer animação assim ela já tá animando só que a gente tem que fazer uma animação para ela girar então assim como que eu faço essa animação aqui na seta

mesmo então ponto Arrow na nossa seta a gente coloca uma transition de Transform ponto 2 S linear então aqui ela vai girar agora e a gente pode fazer aquela animação de Fade também para o texto ele aparecer assim lentamente então para isso eu coloco aqui no accordeon Body eu coloco um transition também só que agora vai ser da opacidade e vai ter vai ser ponto 3S vai ser um pouquinho mais lento vai ficar assim só que tá vendo quando a gente clica que fica meio bugado na hora que volta parece que o texto ele não

volta certinho para isso a gente tem que colocar aqui também um overflow Hing pro texto que ficar sobreescrito para cima ele não aparecer então ele fica mais ou menos assim Então esse foi o nosso acordeon ele tá pronto aqui vocês podem escrever qualquer coisa né Por exemplo aqui eu botei outros textos coloquei uma respostinha pra minha pergunta então vocês podem ficar à vontade para trocar essas coisas também Então esse foi o vídeo eu espero que vocês tenham gostado se vocês gostaram não esqueçam de deixar o like se inscrever aqui no canal ativar o Sininho para

receber os próximos vídeos e até o próximo vídeo tchau