CodeWiki

📚 Documentação: Componente Acordeão (Accordion)

🎯 Objetivo

O componente acordeão permite mostrar ou esconder conteúdo ao clicar em um cabeçalho. É útil para FAQs, menus, seções colapsáveis ou qualquer área onde o conteúdo precisa ser organizado de forma compacta.

🧠 Funcionamento

O acordeão é ativado por elementos com a classe .toggleAccordionDefault. Ao clicar, ele alterna a visibilidade do conteúdo imediatamente abaixo.

🧩 Estrutura HTML esperada

<div class="toggleAccordionDefault">Título da Seção</div>
<div class="accordionContent">Conteúdo escondido</div>

O primeiro <div> é o gatilho do acordeão.
O segundo <div> é o conteúdo que será expandido ou recolhido.

🎨 Estilo CSS básico

.toggleAccordionDefault {
  background-color: #f1f1f1;
  padding: 15px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.toggleAccordionDefault.active {
  background-color: #d1e7dd;
}

.accordionContent {
  display: none;
  padding: 15px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fafafa;
}

.accordionContent.active {
  display: block;
}

A classe .active é usada para mostrar o conteúdo e destacar o cabeçalho.

⚙️ Código JavaScript

var activeAccordion = document.querySelectorAll(".toggleAccordionDefault");

activeAccordion.forEach(function(activeAccordions) {
  activeAccordions.addEventListener('click', function(e) {
    this.classList.toggle("active"); // ativa/desativa o cabeçalho
    this.nextElementSibling.classList.toggle("active"); // ativa/desativa o conteúdo
    e.preventDefault(); // evita comportamento padrão (se for um link)
  });
});

Explicação passo a passo:

Seleciona todos os elementos com .toggleAccordionDefault
Para cada um, adiciona um evento de clique
Ao clicar:
- Alterna a classe active no cabeçalho
- Alterna a classe active no conteúdo logo abaixo
- Impede o comportamento padrão do clique

💡 Boas práticas

Use títulos claros e objetivos nos cabeçalhos.
Mantenha o conteúdo conciso para facilitar a leitura.
Evite abrir múltiplos acordeões ao mesmo tempo (se necessário, posso adaptar o JS para isso).
Adicione transições suaves com max-height e overflow para uma experiência mais elegante.

🧪 HTML + CSS + JS para o acordeão

Exemplo completo

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Acordeão Simples</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
    }

    .toggleAccordionDefault {
      background-color: #f1f1f1;
      padding: 15px;
      cursor: pointer;
      border: 1px solid #ccc;
      margin-bottom: 5px;
      transition: background-color 0.3s ease;
    }

    .toggleAccordionDefault.active {
      background-color: #d1e7dd;
    }

    .accordionContent {
      display: none;
      padding: 15px;
      border: 1px solid #ccc;
      border-top: none;
      background-color: #fafafa;
    }

    .accordionContent.active {
      display: block;
    }
  </style>
</head>
<body>

  <h2>Exemplo de Acordeão</h2>

  <div class="toggleAccordionDefault">Seção 1</div>
  <div class="accordionContent">
    <p>Conteúdo da seção 1. Aqui você pode colocar qualquer informação.</p>
  </div>

  <div class="toggleAccordionDefault">Seção 2</div>
  <div class="accordionContent">
    <p>Conteúdo da seção 2. Pode ser texto, imagens, ou até formulários.</p>
  </div>

  <div class="toggleAccordionDefault">Seção 3</div>
  <div class="accordionContent">
    <p>Conteúdo da seção 3. Ideal para FAQs ou menus escondidos.</p>
  </div>

  <script>
    /* ACCORDION SCRIPTS */
    var activeAccordion = document.querySelectorAll(".toggleAccordionDefault");

    activeAccordion.forEach(function(activeAccordions) {
      activeAccordions.addEventListener('click', function(e) {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("active");
        e.preventDefault();
      });
    });
  </script>

</body>
</html>