Criando Exibição Toggle (Acordeão) com JavaScript

Como criar uma interface estilo FAQ que abre e fecha ao clicar

👀 Demonstração ao Vivo

👇Clique nos títulos das perguntas abaixo para alternar o conteúdo👇

❓ Pergunta 1: O que é isso?

Esta é uma interface tipo acordeão controlada por JavaScript. Ao clicar no título, o conteúdo correspondente é exibido ou ocultado.

❓ Pergunta 2: Quando devo usar?

É útil para FAQs, menus retráteis, exibição de informações adicionais e para organizar grandes quantidades de conteúdo.

📋 Trecho de Código (HTML e JavaScript)

Código mínimo necessário para implementar essa funcionalidade.

*Nota: Presume-se que o CSS com classes como `.toggle-box` esteja incluído no seu arquivo `style.css`.

Estrutura HTML

<!-- Primeiro bloco -->
<div class="toggle-box">
  <div class="toggle-title">Título da Pergunta 1</div>
  <div class="toggle-content">
    <p>Resposta da pergunta 1 vai aqui.</p>
  </div>
</div>

<!-- Segundo bloco -->
<div class="toggle-box">
  <div class="toggle-title">Título da Pergunta 2</div>
  <div class="toggle-content">
    <p>Resposta da pergunta 2 vai aqui.</p>
  </div>
</div>

JavaScript

document.querySelectorAll('.toggle-title').forEach(title => {
  title.addEventListener('click', () => {
    title.classList.toggle('active');
    const content = title.nextElementSibling;
    content.classList.toggle('open');
  });
});

💻 Código Completo Funcional (Arquivo HTML)

Copie o código abaixo, salve com extensão `.html` e abra no navegador para ver funcionando.

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Exibição Toggle</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; }
    .toggle-box { border: 1px solid #ccc; margin-bottom: 1rem; padding: 1rem; border-radius: 8px; }
    .toggle-title { cursor: pointer; font-weight: bold; position: relative; }
    .toggle-title::after { content: '＋'; position: absolute; right: 0; }
    .toggle-title.active::after { content: '−'; }
    .toggle-content { display: none; margin-top: 1rem; border-top: 1px solid #eee; padding-top: 1rem; }
    .toggle-content.open { display: block; }
  </style>
</head>
<body>
  <h1>FAQ</h1>
  <div class="toggle-box">
    <div class="toggle-title">Pergunta 1</div>
    <div class="toggle-content"><p>Resposta 1</p></div>
  </div>
  <div class="toggle-box">
    <div class="toggle-title">Pergunta 2</div>
    <div class="toggle-content"><p>Resposta 2</p></div>
  </div>
  <script>
    document.querySelectorAll('.toggle-title').forEach(title => {
      title.addEventListener('click', () => {
        title.classList.toggle('active');
        const content = title.nextElementSibling;
        content.classList.toggle('open');
      });
    });
  </script>
</body>
</html>

📘 Explicação e Dicas de Personalização

Este template de exibição toggle fornece uma estrutura básica para criar FAQs ou menus tipo acordeão. No uso real, permitir que múltiplas seções fiquem abertas ao mesmo tempo pode prejudicar a leitura. Se quiser permitir apenas uma seção aberta por vez, recomenda-se ajustar o JavaScript para fechar as demais automaticamente.

Adicionar animações também melhora a aparência. Por exemplo, usando transition e max-height no CSS, você pode aplicar efeitos de fade ou slide com facilidade.