Cómo mostrar contenido como en un acordeón

Hoy veremos cómo mostrar contenido como en un acordeón, es decir, tenemos un texto a modo de título, y al hacer clic sobre él, se mostrará otro contenido.

En esta ocasión, el código que vamos a utilizar es un código HTML muy sencillo, así que… ¡vamos a ello!.

Código que vamos a utilizar para mostrar contenido como en un acordeón

Como hemos dicho, utilizaremos un código HTML bastante sencillo, utilizaremos las etiquetas details y summary.

La etiqueta details la utilizaremos para crear las estructuras del acordeón, y la etiqueta summary la utilizaremos para mostrar los títulos sobre los que vamos a hacer clic, y a continuación, mostraremos el contenido como si fuera un acordeón.

Además, a la etiqueta details podemos aplicarle el parámetro open para que el acordeón aparezca abierto. Si lo quieres cerrado, tan solo tienes que quitar este parámetro (la palabra open).

Por último, si quieres mostrar imágenes, tan solo tienes que escribir el código HTML de la imagen, (ya sabes, <img src=»…).

Y el resultado es este (haz clic en las palabras Detalles):

 

– Título del acordeón (texto sobre el que vas a hacer clic para mostrar el contenido). Por defecto está abierto.

Contenido que se mostrará al hacer clic en el título del acordeón. Como lo hemos puesto abierto, por defecto ya se muestra el contenido. Para ver su funcionamiento prueba a hacer clic en el siguiente título.

– Título del segundo acordeón.

Este es el texto que hay debajo del logo. 🙂

 

¿Qué te ha parecido?, ¿sencillo, verdad?.

Ahora puedes aplicarle un poco de CSS para, pro ejemplo, ponerle un borde al acordeón, un color de relleno al contenido o lo que se te ocurra.