Introducción

Este tutorial explica paso a paso cómo crear un acordeón de preguntas frecuentes (FAQ) para WordPress usando únicamente HTML y CSS puro, sin JavaScript. Se incluyen dos aproximaciones: (A) la solución basada en details/summary (semántica y accesible por defecto) y (B) la técnica del checkbox label (mayor control visual). También se detallan instrucciones para integrar el código en el editor de WordPress (Block Editor, Classic Editor, widgets, o temas hijos), recomendaciones de accesibilidad, personalización y soluciones a problemas comunes.

Resumen de opciones

• details/summary: mejor semántica y comportamiento accesible sin JS menos flexibilidad visual por defecto.
• Checkbox label: control total del aspecto (animaciones, iconos), funciona con CSS puro la semántica ARIA puede requerir JS para actualizar estados ARIA dinámicamente.

1) Opción A: Acordeón con details/summary (recomendado por accesibilidad)

El elemento ltdetailsgt incluye por defecto el comportamiento expandir/contraer y soporte de teclado. Es la opción más sencilla y robusta en navegadores modernos.

HTML de ejemplo

ltdiv class=faq-accordion details-stylegt
  ltdetailsgt
    ltsummarygt¿Cuál es el plazo de entrega?lt/summarygt
    ltpgtEl plazo habitual es de 3 a 5 días laborables, dependiendo de la disponibilidad.lt/pgt
  lt/detailsgt

  ltdetailsgt
    ltsummarygt¿Cómo puedo solicitar una devolución?lt/summarygt
    ltpgtPara devoluciones, contacte con soporte indicando el número de pedido y motivo.lt/pgt
  lt/detailsgt
lt/divgt

CSS de ejemplo (estilizado y animación)

.faq-accordion.details-style details{
  border-bottom: 1px solid #e3e3e3
  padding: 0.75rem 0
}

.faq-accordion details summary{
  list-style: none
  cursor: pointer
  font-weight: 600
  position: relative
  padding-right: 2rem
  outline: none
}

/ Icono con pseudo-elemento /
.faq-accordion details summary::after{
  content:  
  position: absolute
  right: 0
  top: 0
  font-size: 1.2rem
  transition: transform 0.25s ease
}

/ Cuando está abierto, rotar o cambiar icono /
.faq-accordion details[open] summary::after{
  content: -
}

/ Animación suave del contenido /
.faq-accordion details > p{
  margin: 0.5rem 0 0 0
  color: #444
  line-height: 1.5
}

Ventajas

• Soporte de teclado y lector de pantalla integrado.
• Sencillo de implementar: copiar y pegar el HTML y CSS.
• Funciona sin JavaScript.

Limitaciones

• Menos control sobre la animación de altura (se puede mejorar con pseudo-elementos y max-height, aunque con trucos).
• Compatibilidad: navegadores antiguos no soportan details/summary (hoy en día la compatibilidad es bastante buena, pero conviene comprobar).

2) Opción B: Acordeón con input type=checkbox y label (control visual avanzado)

Esta técnica usa inputs ocultos y labels asociados para controlar la apertura y cierre mediante selectores hermanos en CSS. Permite animaciones suaves, transición de altura y estilos sofisticados sin JS.

HTML de ejemplo

ltdiv class=faq-accordion checkbox-stylegt

  ltdiv class=faq-itemgt
    ltinput type=checkbox id=faq1 class=faq-toggle /gt
    ltlabel for=faq1 class=faq-questiongt¿Cuál es el plazo de entrega?lt/labelgt
    ltdiv class=faq-answer aria-hidden=truegt
      ltpgtEl plazo habitual es de 3 a 5 días laborables, dependiendo de la disponibilidad.lt/pgt
    lt/divgt
  lt/divgt

  ltdiv class=faq-itemgt
    ltinput type=checkbox id=faq2 class=faq-toggle /gt
    ltlabel for=faq2 class=faq-questiongt¿Cómo puedo solicitar una devolución?lt/labelgt
    ltdiv class=faq-answer aria-hidden=truegt
      ltpgtPara devoluciones, contacte con soporte indicando el número de pedido y motivo.lt/pgt
    lt/divgt
  lt/divgt

lt/divgt

CSS de ejemplo (animación, iconos, control)

.faq-accordion.checkbox-style{ max-width:800px margin:0 auto }

/ Ocultar el checkbox visualmente pero mantenerlo accesible /
.faq-toggle{
  position: absolute
  opacity: 0
  pointer-events: none
}

/ Pregunta (label) /
.faq-question{
  display: block
  cursor: pointer
  padding: 1rem 2.5rem 1rem 0
  font-weight:700
  position: relative
  border-bottom: 1px solid #eaeaea
}

/ Icono del lado derecho /
.faq-question::after{
  content:  
  position: absolute
  right: 0
  top: 50%
  transform: translateY(-50%)
  transition: transform 0.25s ease
}

/ Contenedor de respuesta: colapsado por defecto /
.faq-answer{
  max-height: 0
  overflow: hidden
  transition: max-height 0.35s ease
  padding-left: 0
}

/ Cuando el checkbox está marcado, mostrar la respuesta /
.faq-toggle:checked   .faq-question   .faq-answer{
  max-height: 500px / lo suficiente según contenido /
  padding: 0.6rem 0 1rem 0
}

/ Cambiar icono cuando está abierto /
.faq-toggle:checked   .faq-question::after{
  content: -
}

Notas sobre la técnica checkbox

• Permite transiciones suaves de max-height y estilos detallados.
• El estado ARIA (por ejemplo aria-expanded) no se actualiza automáticamente sin JS puede añadirse con JavaScript si se requiere completa compatibilidad ARIA. Aun así, el control con input/label tiene buen soporte para teclado (la casilla puede recibir foco y alternarse con la barra espaciadora).
• Para permitir que solo una pestaña esté abierta a la vez sin JS, usar input type=radio en lugar de checkbox y organizar los radios dentro de un mismo nombre esto obliga a cerrar la anterior al abrir otra.

3) Integración en WordPress

Hay varias formas de añadir este acordeón en WordPress según cómo administres el contenido:

1. Block Editor (Gutenberg)
   1. Añade un bloque HTML personalizado.
   2. Pega el HTML del acordeón (el fragmento ltdiv class=faq-accordion…gt).
   3. Guarda la página/entrada.
   4. Agrega el CSS en Apariencia gt Personalizar gt CSS adicional, o en el stylesheet del tema (preferible en un tema hijo) para que no se pierda en actualizaciones.
2. Classic Editor
   1. Pasa al modo Texto (HTML) y pega el HTML del acordeón.
   2. Agregar el CSS en Apariencia gt Personalizar gt CSS adicional o en style.css del tema/tema hijo.
3. Widget o Área de Pie de página
   1. Usa un widget de HTML personalizado y pega el HTML.
   2. Añade el CSS de forma global (Customizer o enqueue en functions.php del tema hijo).
4. Plantilla de tema (tema hijo)
   1. Crear una plantilla o partial en el tema hijo e incluir el HTML donde deseas que aparezca.
   2. Coloca el CSS en style.css del tema hijo o crea un archivo css específico y enlázalo desde functions.php con wp_enqueue_style().

Recomendaciones para WordPress

• Namespacea las clases con un prefijo único (por ejemplo .mi-tienda-faq o .faq-accordion) para evitar conflictos con estilos del tema.
• Si el CSS no se aplica, asegúrate de que no haya reglas del tema con mayor especificidad. Usa selectores más específicos o !important con moderación.
• Para mantener el código después de actualizaciones de tema, usa un tema hijo o agrega CSS en Apariencia gt Personalizar gt CSS adicional.

4) Accesibilidad (a11y)

La accesibilidad es clave para FAQ. Considera lo siguiente:

• Si usas details/summary, la semántica y el comportamiento del teclado son adecuados por defecto.
• Si usas checkbox/label, asegúrate de que los inputs sean focoable y estén correctamente asociados con sus labels. Considera añadir atributos ARIA si necesitas anunciar el estado a lectores de pantalla sin embargo, actualizar aria-expanded dinámicamente requiere JavaScript.
• Asegura contraste de color para títulos y enlaces.
• Provee estados :focus visibles para navegación con teclado.

5) Variantes avanzadas y personalización

• Solo una abierta a la vez: usa input type=radio con el mismo atributo name para que al seleccionar una nueva se cierre la anterior.
• Animaciones fluidas: combinar transición en max-height con overflow hidden. Para contenido de altura variable, usar valores máximos conservadores o técnicas con transform/scale y animaciones de opacidad.
• Iconos: usar pseudo-elementos (::after) o insertar SVG inline en el label para iconos más precisos.
• Estilos responsivos: ajustar padding, tamaño de fuente y max-width con media queries para móviles.

6) Ejemplo completo listo para copiar (HTML CSS)

Este ejemplo usa la técnica checkbox con estilo completo. Pega el HTML en un bloque HTML personalizado y el CSS en Apariencia gt Personalizar gt CSS adicional (o en tu stylesheet del tema hijo).

lt!-- HTML: pegar en un bloque HTML personalizado --gt
ltdiv class=faq-accordion mi-faq-checkboxgt

  ltdiv class=faq-itemgt
    ltinput type=checkbox id=mi-faq-1 class=mi-faq-toggle /gt
    ltlabel for=mi-faq-1 class=mi-faq-questiongt¿Cuál es el plazo de entrega?lt/labelgt
    ltdiv class=mi-faq-answergt
      ltpgtEl plazo habitual es de 3 a 5 días laborables, dependiendo de la disponibilidad.lt/pgt
    lt/divgt
  lt/divgt

  ltdiv class=faq-itemgt
    ltinput type=checkbox id=mi-faq-2 class=mi-faq-toggle /gt
    ltlabel for=mi-faq-2 class=mi-faq-questiongt¿Cómo puedo solicitar una devolución?lt/labelgt
    ltdiv class=mi-faq-answergt
      ltpgtPara devoluciones, contacte con soporte indicando el número de pedido y motivo.lt/pgt
    lt/divgt
  lt/divgt

lt/divgt

/ CSS: pegar en Apariencia > Personalizar > CSS adicional o style.css del tema hijo /

.mi-faq-checkbox { max-width: 900px margin: 0 auto font-family: system-ui, sans-serif color: #222 }

/ ocultar checkbox visualmente /
.mi-faq-toggle { position: absolute opacity: 0 pointer-events: none }

/ Pregunta /
.mi-faq-question {
  display: block
  padding: 1rem 2.25rem 1rem 0
  cursor: pointer
  font-weight: 700
  border-bottom: 1px solid #eee
  position: relative
}

/ Icono /
.mi-faq-question::after {
  content:  
  position: absolute
  right: 0
  top: 50%
  transform: translateY(-50%)
  font-size: 1.2rem
  transition: transform 0.25s ease
}

/ Respuesta colapsada /
.mi-faq-answer {
  max-height: 0
  overflow: hidden
  transition: max-height 0.35s cubic-bezier(.4,.0,.2,1), opacity 0.25s ease
  opacity: 0
  padding-bottom: 0
}

/ Mostrar cuando el checkbox está marcado /
.mi-faq-toggle:checked   .mi-faq-question   .mi-faq-answer {
  max-height: 400px
  opacity: 1
  padding-bottom: 1rem
}

/ Icono cambia a signo de menos /
.mi-faq-toggle:checked   .mi-faq-question::after {
  content: -
}

/ Accesibilidad visual: foco /
.mi-faq-question:focus, .mi-faq-toggle:focus   .mi-faq-question {
  outline: 2px dashed #6ca0ff
  outline-offset: 3px
}

/ Responsive /
@media (max-width:600px){
  .mi-faq-question { font-size: 0.98rem padding-right: 1.75rem }
}

7) Problemas comunes y soluciones

• El CSS no se aplica: verifica que las clases coincidan exactamente y que el CSS no esté sobreescrito por reglas del tema. Aumenta la especificidad si es necesario.
• El bloque HTML se filtra o elimina: algunos plugins de seguridad o editores pueden sanitizar HTML. Usa un bloque personalizado o plugins que permitan HTML sin filtrar, o inserta el HTML desde la plantilla del tema.
• Icono no cambia o animación tosca: asegurarse de usar selectores correctos (.mi-faq-toggle:checked .mi-faq-question::after) y comprobar conflictos con otras reglas ::after en el tema.
• Accesibilidad ARIA: si necesitas que lectores de pantalla anuncien expandido o colapsado, la opción details/summary es la más simple si usas checkbox, considera añadir un pequeño script que sincronice aria-expanded y aria-hidden si la política del proyecto permite JS.

Recursos útiles

Puedes encontrar más información sobre el elemento details en la documentación oficial y ejemplos de estilos para mejorar la experiencia del usuario: MDN: details