Mostrar contenido como en un acordeón

Tiempo estimado de lectura: 3 minutos

 

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=»…).

<details open>
<summary><h4>Título del acordeón (texto sobre el que vas a hacer clic para mostrar el contenido). Por defecto está abierto.</h4></summary>
<p>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.</p>
</details>
<details>
<summary><h4>Título del segundo acordeón.</h4></summary>
<img src="https://www.josegonzalezbueno.com/wp-content/uploads/2017/01/logo.png">
<p>Este es el texto que hay debajo del logo. :-)</p>
</details>

Y el resultado es este:

 

– 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.

 


¿Te ha servido este artículo?, PUES HASTA QUE LA MUERTE NOS SEPARE 0
¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada.

He leído y acepto la política de privacidad de este sitio. *