Cómo hacer ACORDEÓN DESPLEBALE con HTML (Details & Summary)

En este vídeo te voy a enseñar a hacer un acordeón desplegable utilizando solamente HTML para que funcione. Eso significa que no hará falta que utilices ni JavaScript ni CSS para que funcione correctamente.

De hecho, lo haremos en HTML de forma nativa con los elementos Details y Summary, que son dos etiquetas de HTML5 que sirven para crear un acordeón desplegable.

Aquí te dejo el vídeo para que veas lo fácil que es crear este tipo de acordeón.

Acordeón en HTML con Summary y Details tags

Todo lo que tenemos que hacer para crear nuestro acordeón en HTML (solamente) es utilizar la etiqueta summary, para crear todo el envoltorio y el encabezado del acordeón. Y luego crearemos la «respuesta» o la parte oculta del acordeón con la etiqueta details. Veamos un ejemplo de como queda:

Parte HTML: Summary y Details

<details>
    <summary>Título o Encabezado</summary>
    <p>Parte escondida del acordeón</p>
  </details>

Como ves con un par de líneas de código ya tenemos hecha la estructura. Ahora vamos con la maquetación, para darle un poco de estilos.

Parte CSS de acordeón

En este caso, vamos a hacer algo sencillo, para no liarnos mucho.

details{
  background: #f2f2f2;
  padding: 1rem;
  margin: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}

Lo que hacemos es pintar el fondo con un background de color gris. Y después le damos cierto margen.

Lo más importante aquí, desde el punto de vista de experiencia de usuario es añadir la propiedad cursor:pointer, para que el usuario vea que se puede hacer click de forma rápida.

Spoiler: Al final te enseño a maquetar de forma muy fácil este acordeón y a modificar algunas cosas.