Puedes crear un acordeón en HTML sin JavaScript utilizando <details> y <summary>. El navegador se encarga de abrir y cerrar cada panel al activar su título.
<details>
<summary>¿Necesito experiencia previa?</summary>
<p>No. Puedes empezar con los conceptos básicos de HTML.</p>
</details>Esta solución encaja en preguntas frecuentes y explicaciones complementarias. Evita esconder dentro de paneles cerrados la información que todos necesitan ver para completar una tarea.
Cómo funcionan details y summary
details contiene todo el panel. Su primer elemento summary define el título visible que lo abre. El resto del contenido aparece cuando el panel está desplegado.
El comportamiento básico viene incluido en el navegador, también para teclado. No necesitas simular un botón con un div ni mantener manualmente un atributo aria-expanded.
Ejemplo completo de acordeón HTML y CSS
<section class="faq" aria-labelledby="titulo-faq">
<h2 id="titulo-faq">Preguntas frecuentes del curso</h2>
<details>
<summary>¿Qué necesito para empezar?</summary>
<div class="respuesta">
<p>Un editor de texto y un navegador actualizado.</p>
</div>
</details>
<details>
<summary>¿Hay ejercicios prácticos?</summary>
<div class="respuesta">
<p>Sí. Puedes adaptar cada ejemplo a tu proyecto.</p>
</div>
</details>
</section>
<style>
.faq { max-width: 720px; margin-inline: auto; }
.faq details {
border: 1px solid #cbd5e1;
border-radius: 12px;
margin-block: 12px;
background: #fff;
}
.faq summary {
padding: 18px;
font-weight: 700;
cursor: pointer;
}
.faq summary::marker { color: #2563eb; }
.faq summary:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}
.faq details[open] { border-color: #2563eb; }
.respuesta { padding: 0 18px 18px; }
.respuesta p { margin-top: 0; line-height: 1.6; }
</style>El ejemplo conserva el marcador nativo y permite abrir varios paneles. La clase faq limita los estilos al componente para no modificar todos los desplegables del sitio.
Cómo dejar un panel abierto al cargar
Añade el atributo open al elemento:
<details open>
<summary>Antes de comenzar</summary>
<p>Guarda los archivos del proyecto en la misma carpeta.</p>
</details>open es booleano. Para cerrar el panel por defecto, elimina el atributo: open="false" también lo deja activado.
Cómo permitir que solo se abra uno
Los navegadores que admiten la agrupación nativa pueden coordinar paneles con el mismo atributo name:
<details name="curso">
<summary>Contenido</summary>
<p>Fundamentos de estructura web.</p>
</details>
<details name="curso">
<summary>Material necesario</summary>
<p>Editor y navegador.</p>
</details>Verifica esa función en los navegadores de tu audiencia. Si no se aplica la exclusividad, los paneles pueden seguir funcionando de forma independiente. Utiliza un nombre distinto para cada grupo que deba actuar por separado.
Accesibilidad: qué conservar
Mantén títulos descriptivos, foco visible y una zona de activación cómoda. Evita introducir otros botones o enlaces dentro de summary si pueden confundir la acción principal. Comprueba con Tab y con las teclas de activación que puedes llegar a cada panel y usarlo.
El elemento nativo facilita la implementación, pero no convierte automáticamente todo el contenido del componente en accesible. Revisa contraste, textos y estructura.
Errores frecuentes
- Colocar el título fuera de
summary. - Ocultar el foco con
outline: nonesin alternativa. - Crear estilos globales que cambian componentes de otras páginas.
- Prometer resultados enriquecidos de Google por añadir un acordeón.
Preguntas frecuentes
¿Puedo incluir listas o imágenes dentro?
Sí. Usa el contenido adecuado para la respuesta y añade texto alternativo a las imágenes que lo necesiten.
¿Necesito un plugin para usarlo?
No en una página HTML. En un gestor de contenidos, comprueba qué etiquetas admite el editor y dónde permite guardar el CSS.
Practica con tres dudas reales de tus usuarios. Para organizar los títulos de la página, revisa la guía de encabezados HTML y continúa en nuestros tutoriales.
Referencia técnica: documentación de details en MDN.
