Crear una Vista de Mostrar/Ocultar (Acordeón) con JavaScript

Cómo construir una interfaz estilo FAQ que se abre y cierra con clics

👀 Demostración en Vivo

👇Haz clic en los títulos de las preguntas para mostrar u ocultar el contenido👇

❓ Pregunta 1: ¿Qué es esto?

Es una interfaz tipo acordeón controlada con JavaScript. Al hacer clic en el título, se muestra u oculta el contenido correspondiente.

❓ Pregunta 2: ¿Cuándo se usa?

Es útil para preguntas frecuentes (FAQ), menús plegables y mostrar detalles adicionales. Ideal para organizar gran cantidad de información.

📋 Fragmento de Código (HTML y JavaScript)

HTML y JavaScript mínimos necesarios para implementar esta funcionalidad.

*Nota: Se asume que las clases como `.toggle-box` ya están incluidas en el archivo `style.css`.

Estructura HTML

<!-- Primer conjunto -->
<div class="toggle-box">
  <div class="toggle-title">Título de la pregunta 1</div>
  <div class="toggle-content">
    <p>Aquí va la respuesta de la pregunta 1</p>
  </div>
</div>

<!-- Segundo conjunto -->
<div class="toggle-box">
  <div class="toggle-title">Título de la pregunta 2</div>
  <div class="toggle-content">
    <p>Aquí va la respuesta de la pregunta 2</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 (Archivo HTML)

Copia el siguiente código, guárdalo como `.html` y ábrelo en el navegador para probarlo.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demostración 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>Preguntas Frecuentes</h1>
  <div class="toggle-box">
    <div class="toggle-title">Pregunta 1</div>
    <div class="toggle-content"><p>Respuesta 1</p></div>
  </div>
  <div class="toggle-box">
    <div class="toggle-title">Pregunta 2</div>
    <div class="toggle-content"><p>Respuesta 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>

📘 Explicación y Consejos de Personalización

Esta plantilla de toggle proporciona una estructura básica para crear FAQs o menús tipo acordeón. En la práctica, tener múltiples secciones abiertas al mismo tiempo puede dificultar la lectura. Si solo deseas que se abra una a la vez, modifica el JavaScript para cerrar automáticamente las demás.

Además, puedes añadir animaciones para que las transiciones se vean más suaves. Por ejemplo, usando transition y max-height en CSS puedes lograr efectos de deslizamiento o desvanecimiento fácilmente.