✅Cómo Crear un Acordeón para FAQs en Gutenberg sin Plugins: Solo con HTML, CSS y JavaScript

Si has llegado hasta aquí es porque probablemente eres de los que usan Gutenberg «a pelo» y, al crear tu página de Preguntas Frecuentes (FAQs), te has dado cuenta de que Gutenberg no trae ningún bloque nativo de acordeón.

Bien, no te preocupes: no necesitas instalar ningún plugin adicional solo para mostrar unas simples preguntas y respuestas desplegables.

Hoy te voy a enseñar cómo puedes crear un acordeón funcional solo con HTML, CSS y JavaScript dentro de un bloque de HTML personalizado de Gutenberg. Esta es una solución ligera, rápida y que puedes personalizar fácilmente según tu diseño.

¿Qué es un acordeón?

Un acordeón es una lista de preguntas (o títulos) que, al hacer clic, despliegan o esconden el contenido asociado, ideal para FAQ o cualquier tipo de sección donde quieras mostrar información de manera organizada y sin saturar la vista.

Cómo hacerlo en Gutenberg sin plugins

Lo único que tienes que hacer es insertar un bloque de HTML personalizado en la página donde quieras colocar tus FAQs y pegar el siguiente código:

<style>
  .accordion-container {
    max-width: 700px;
    margin: 0 auto;
  }
  .accordion-item {
    border-bottom: 1px solid #ddd;
  }
  .accordion-header {
    padding: 15px 20px;
    background: #13b0a0;
    color: #fff;
    cursor: pointer;
    position: relative;
    font-weight: bold;
  }
  .accordion-header::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 20px;
    transition: transform 0.3s;
  }
  .accordion-item.active .accordion-header::after {
    transform: rotate(45deg);
  }
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: #f9f9f9;
    padding: 0 20px;
  }
  .accordion-item.active .accordion-content {
    max-height: 300px;
    padding: 15px 20px;
  }
</style>

<div class="accordion-container">
  <div class="accordion-item">
    <div class="accordion-header">¿Qué es Gutenberg?</div>
    <div class="accordion-content">
      <p>Gutenberg es el editor de bloques de WordPress que te permite crear contenido visualmente.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">¿Qué es un acordeón?</div>
    <div class="accordion-content">
      <p>Un acordeón es una sección desplegable que muestra y oculta contenido al hacer clic.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">¿Se puede usar sin plugins?</div>
    <div class="accordion-content">
      <p>Sí, este acordeón está hecho solo con HTML, CSS y JavaScript y funciona dentro de Gutenberg sin plugins adicionales.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">¿Puedo añadir más preguntas?</div>
    <div class="accordion-content">
      <p>¡Claro! Puedes duplicar los bloques de código y crear tantas preguntas como necesites.</p>
    </div>
  </div>
</div>

<script>
  const items = document.querySelectorAll('.accordion-item');

  items.forEach(item => {
    item.querySelector('.accordion-header').addEventListener('click', () => {
      item.classList.toggle('active');
      // Cierra otros acordeones (opcional)
      items.forEach(i => {
        if (i !== item) {
          i.classList.remove('active');
        }
      });
    });
  });
</script>

Lenguaje del código: HTML, XML (xml)

¿Qué puedes hacer con este acordeón?

• Agregar tantas preguntas y respuestas como quieras.
• Personalizar colores, tipografías y estilos a tu gusto.
• Modificar el comportamiento: que se pueda abrir solo una sección a la vez o varias simultáneamente.
• Insertar cualquier tipo de contenido dentro de cada respuesta: imágenes, listas, enlaces, etc.

¿Cómo agregar más acordeones?

Muy fácil, solo tienes que duplicar la estructura de un bloque de acordeón y editar el contenido.

Paso 1: Copia uno de los bloques .accordion-item completos

Por ejemplo:

<div class="accordion-item">
  <div class="accordion-header">¿Esta es una pregunta nueva?</div>
  <div class="accordion-content">
    <p>Aquí va la respuesta o el contenido adicional para esta nueva pregunta.</p>
  </div>
</div>

Paso 2: Pégalo justo debajo del último acordeón existente

Dentro del <div class="accordion-container">...</div>, debajo de los otros .accordion-item ya creados.

Consejo extra

Puedes modificar el texto de cada <div class="accordion-header"> para que sea la pregunta y cambiar el contenido dentro de <div class="accordion-content"> para mostrar la respuesta o información adicional.

¿Y si quiero personalizar el diseño?

En la parte de <style>, puedes ajustar:

• Los colores de fondo y texto de las cabeceras (.accordion-header).
• El diseño de la flecha o símbolo «+» (en la pseudoclase ::after).
• Los bordes, márgenes y paddings para adaptarlo a tu branding.

¿Por qué usar este método?

Porque si solo necesitas un acordeón en una página específica, instalar un plugin completo solo para esto es innecesario. Gutenberg es potente si sabes aprovechar sus bloques de HTML personalizado.

Además, este método te da total libertad para modificarlo según tus necesidades, sin depender de bloqueadores de diseño o plugins pesados.