Acordeón en HTML sin JavaScript, con details y summary

Un acordeón, como el de unas preguntas frecuentes, es una lista de títulos que se despliegan al pulsarlos. HTML lo trae hecho con <details> y <summary>, accesible con el teclado y con lector de pantalla, y desde 2024 también puede abrir solo uno a la vez.

El código

<div class="faq">
  <details name="faq" open>
    <summary>¿Cuánto tarda el envío?</summary>
    <p>De 2 a 5 días hábiles en todo México.</p>
  </details>
  <details name="faq">
    <summary>¿Puedo devolver un producto?</summary>
    <p>Sí, durante los 30 días siguientes a la compra.</p>
  </details>
  <details name="faq">
    <summary>¿Qué formas de pago aceptan?</summary>
    <p>Tarjeta, transferencia y pago en tiendas de conveniencia.</p>
  </details>
</div>

.faq { max-width: 30rem; font-family: system-ui, sans-serif; }
.faq details { border-bottom: 1px solid #e3e8ee; }
.faq summary {
  padding: 12px 4px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3em; line-height: 1; color: #1e64af; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 4px 14px; color: #33475b; }

ResultadoÁbrelo en el editor →

Abre otra pregunta: la que estaba abierta se cierra. Comprobado en los tres navegadores: con la primera abierta, al pulsar la segunda queda 1 abierta, la número 2.

Cómo funciona

<details> envuelve cada pregunta y <summary> es el título que se pulsa. El navegador añade o quita el atributo open. El atributo open en el HTML deja una abierta al cargar.
name="faq", el mismo en todos, los convierte en un grupo exclusivo: abrir uno cierra los demás, como los botones de opción. Funciona en Chrome 120, Safari 17.2 y Firefox 130 en adelante; en los anteriores, simplemente se pueden abrir varios a la vez.
El indicador: list-style: none y el ::-webkit-details-marker quitan el triángulo del navegador, y summary::after pone un «+» que cambia a «−» con details[open].
Buscar en la página (Ctrl+F) encuentra el texto de las respuestas cerradas y abre su details en Chrome y Firefox: otra ventaja frente a esconder el texto con JavaScript.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.