Como fazer um Accordion interativo | HTML, CSS e JavaScript

Olá, pessoal!
Nesse vídeo, vou mostrar para você a criação de um componente de accordion utilizando HTML, CSS e JavaScript. Durante o vídeo, vamos conhecer diversos conceitos fundamentais de JavaScript, tais como funções de clique, forEach, e muito mais. Além disso, no CSS, conheceremos vários conceitos de flexbox.
Repositório com o código:
github.com/Larissakich/accordion
Redes sociais:
LinkedIn: / larissakich
Instagram: @lariikich
E-mail:
[e-mail]
Tema do VSCode:
Omni Owl

[@renanvcb]

Coisa linda, Larissa! Consegui fazer um accordion lindo do zero graças à sua ajuda!!! Nota 1000! Super didática.

[@josimarmiranda9722]

Já tinha assistido outra aula sobre accordion, mas a sua ficou bem mais prática. Direto ao ponto.

[@Paulotkym]

Larissa, tudo bem? Você tem o dom para ensinar! Assisti aulas de cursos pagos e não era tão didático quanto ao seu vídeo! 👏👏👏

[@PauloSantos-yc2fx]

To adorando que to descubrindo a função de recursos do css que eu achava wue nao funcionavam😂

[@iremarpereiradasilva2250]

Larissa parabéns pelos seus tutoriais, você é top, principalmente na sua didática, pois é muito bem explicado. Muito obrigado por nos ajudar nesta carreira tão complexa, que é a da programação. Valeu mesmo.

[@diesnei8067]

Ficou excelente! Simples e funcional, parabéns!

[@angelosilvano1100]

gostei demais, ficou excelente

[@jairolima959]

a sua aula é muito superior a que vi, mesmo sendo de um canal bem grande, ja que estava procurando tutoriais onde eu poderia após clicar, minimizar clicando novamentte, onde o seu explica perfeitamente sobre, muito obrigado

[@AndreOliveira-rn5dx]

Parabéns!!!

[@wallacesilva6087]

Muito bom 🚀

[@olgakich]

Parabéns

[@angelosilvano1100]

muito bom

[@miguelsantana2066]

Usem a tag details ela faz um accordion automaticamente

[@FernandoSilvaRodrigues-fi6yc]

Oi Larissa gostei do tutorial, eu estou tentando fazer um accordion usando a tag button que quando for clicado ele ative uma classe active em uma tag P, usando forEach mais ele fica fazendo loop quando o button é clicado varias vezes, passando por todas as tag P, como eu poderia cancelar esse problema, para quando o button for ativo ele nao avance para a proxima tag P, voce poderia me dar uma luz para resolver esse problema. Obrigado e parabens pelos tutors.

[@ryanpantaneiro]

Uma coisa que eu percebi desenvolvendo o meu aqui: No container, se você definir o display como grid, e não como flex e column. Automaticamente os filhos tem o comportamento diferente, de se adaptar a larguras diferentes, sendo assim, mesmo aumentando o tamanho do span, ele acaba não dando um overflow, nem precisando fazer os tratamentos. Mas eu não sei explicar muito bem o porque isso acontece, sendo que está aplicando no container, não acaba refletindo essas alterações no span por exemplo ou diretamente no accordion-header. Se tiver alguém pra complementar esse adendo :D

[@CFALJokeer]

Como faz para colocar essa funcionalidade dentro de um site wordpress/elementor?

[@eduardosilveira4075]

Curti bastante o vídeo.
Tentei fazer em casa e funcionou perfeitamente. Mas quando fui refazer no site da empresa, não funcionou. 😢

[@larissakich]

Oii, talvez seja alguma importação ou biblioteca que tenha no site de vocês que cause conflito, da uma olhadinha nas importações

[@higormartinsb]

Você trabalha na área ? Ou só ensina mesmo ?