Como fazer um Accordion interativo | HTML, CSS e JavaScript

Поділитися
Вставка
  • Опубліковано 28 лис 2024

КОМЕНТАРІ • 22

  • @jairolima959
    @jairolima959 9 місяців тому

    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

  • @josimarmiranda9722
    @josimarmiranda9722 10 місяців тому +1

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

  • @Paulotkym
    @Paulotkym 10 місяців тому

    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! 👏👏👏

  • @pdeandradecosta
    @pdeandradecosta 2 дні тому

    Me ajudou, muito. Obrigado!!

  • @renanvcb
    @renanvcb 4 місяці тому

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

  • @PauloSantos-yc2fx
    @PauloSantos-yc2fx 10 місяців тому +1

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

  • @diesnei8067
    @diesnei8067 10 місяців тому

    Ficou excelente! Simples e funcional, parabéns!

  • @iremarpereiradasilva2250
    @iremarpereiradasilva2250 7 місяців тому

    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.

  • @angelosilvanno
    @angelosilvanno 10 місяців тому

    gostei demais, ficou excelente

  • @AndreOliveira-rn5dx
    @AndreOliveira-rn5dx 9 місяців тому

    Parabéns!!!

  • @olgakich
    @olgakich 10 місяців тому +1

    Parabéns

  • @wallacesilva6087
    @wallacesilva6087 10 місяців тому

    Muito bom 🚀

  • @eletronicamultimarcas4076
    @eletronicamultimarcas4076 3 місяці тому +1

    Ótimo Tutorial, mas tem um bug, você diminuiu a opacity do BODY, seu conteúdo fica clicável dando um clique falso e abrindo o outro conteúdo abaixo.
    forma correta
    .accordion-body {
    display: none;
    flex-direction: column;
    align-content: center;
    color: #444;
    font-size: 14px;
    padding: 5px 0px;
    }
    .accordion-body.active {
    display: flex;
    }

  • @FernandoSilvaRodrigues-fi6yc
    @FernandoSilvaRodrigues-fi6yc 5 місяців тому

    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.

  • @angelosilvanno
    @angelosilvanno 10 місяців тому

    muito bom

  • @ryanpantaneiro
    @ryanpantaneiro 4 місяці тому

    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
    @CFALJokeer 7 місяців тому

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

  • @miguelsantana2066
    @miguelsantana2066 4 місяці тому

    Usem a tag details ela faz um accordion automaticamente

  • @eduardosilveira4075
    @eduardosilveira4075 7 місяців тому

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

    • @larissakich
      @larissakich  7 місяців тому +1

      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
    @higormartinsb 10 місяців тому

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