Skip to content
Menu
CDhistory
CDhistory

Criar acordeão com Javascript

Posted on Outubro 17, 2021 by admin

Neste blog, vou criar um acordeão usando javascript nativo. Nenhuma biblioteca como jQuery é necessária. JQueryUI tem um componente de acordeão incorporado, que é ótimo de usar. Mas como um desenvolvedor responsável, também devemos saber como criar um com javascript puro. Se você não sabe o que é acordeão então olhe jquery one aqui.

Dividamos o componente em pequenos passos.

  • Acordeão contém lista de painéis.
  • Cada painel tem dois componentes, cabeçalho & corpo.
  • O componente de cabeçalho de todo o painel é sempre visível.
  • Um painel pode ser expandido ou colapsado.
  • Quando um painel é expandido, o seu componente de corpo torna-se visível.
  • Apenas um painel pode ser expandido de cada vez.
  • Quando outro painel é expandido, o componente corporal do último painel se esconde.

Vamos construir o componente com pequenos passos.

  • Passo1 :- Desenho HTML básico
  • Passo2 :- Definir alguns CSS para lidar com a visibilidade
  • Passo3 :- Usando CSS no HTML
  • Passo4 :- Adicionando eventos de clique

Passo1 :- Desenho HTML básico

Vamos criar algum html básico que cria lista de painéis com cabeçalho & body.

Acima de html contém lista de painéis. Cada painel tem cabeçalho e item de corpo. Atualmente tudo é visível.

Passo2 :- Definir alguns CSS para lidar com a visibilidade

Vamos criar duas classes CSS para definir a visibilidade do corpo.

Por padrão, queremos esconder todo o corpo do painel conforme o requerimento. Agora precisamos mostrar apenas elementos expandidos de cada vez. Vamos adicionar classe ativa no painel div para tornar o corpo visível.

Passo3 :- Usando CSS no HTML

Após adicionar CSS no nosso HTML, o código será

Agora todo o corpo do painel está oculto, exceto o primeiro. Nós criamos nosso componente básico de acordeão. Precisamos usar algum javascript para torná-lo totalmente funcional.

Passo4 :- Adicionando eventos de clique

Adicionaremos evento de clique em cada painel, o que mudará a visibilidade do painel.

JS Fiddle link aqui

initAccordion função está definida para inicializar o componente acordion. Ele coloca um evento de clique em cada painel. Quando um painel é clicado, ele remove a classe ativa do painel ativo atual e a adiciona ao novo painel. Por padrão, ele torna o primeiro painel como ativo. Podemos fazer qualquer painel como ativo por padrão passando o elemento do painel para a função showPanel.

Criamos nosso acordeão com sucesso. Este é apenas um modelo muito básico de acordeão mas cobre a funcionalidade principal.

Podemos torná-lo mais extravagante adicionando bons estilos de css, animação e ícones. Também podemos torná-lo mais orientado à performance implementando delegação de eventos & caching de elementos activos actuais. Consulte o meu blog sobre eventos para saber mais sobre eventos em detalhe.

Deixe uma resposta Cancelar resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Artigos recentes

  • Acela está de volta: NYC ou Boston por $99
  • Entrada OMIM – # 608363 – CHROMOSOME 22q11.2 SÍNDROME DE DUPLICAÇÃO
  • Kate Albrecht’s Parents – Learn More About Her Father Chris Albrecht And Mother Annie Albrecht
  • Temple Fork Outfitters
  • Burr (romance)

Arquivo

  • Fevereiro 2022
  • Janeiro 2022
  • Dezembro 2021
  • Novembro 2021
  • Outubro 2021
  • Setembro 2021
  • Agosto 2021
  • Julho 2021
  • Junho 2021
  • Maio 2021
  • Abril 2021
  • DeutschDeutsch
  • NederlandsNederlands
  • SvenskaSvenska
  • DanskDansk
  • EspañolEspañol
  • FrançaisFrançais
  • PortuguêsPortuguês
  • ItalianoItaliano
  • RomânăRomână
  • PolskiPolski
  • ČeštinaČeština
  • MagyarMagyar
  • SuomiSuomi
  • 日本語日本語
©2022 CDhistory | Powered by WordPress & Superb Themes