DEV Community

Cover image for Acordeones exclusivos nativos en HTML5 🪗
Cristian Fernando
Cristian Fernando

Posted on • Edited on

1

Acordeones exclusivos nativos en HTML5 🪗

🔗Índice

  1. Introducción
  2. Acordeón en HTML5
  3. Acordeón exclusivo en HTML5
  4. ¿Y el Can I Use?
  5. Referencias
  6. Conclusiones

1. Introducción

Personalmente considero que HTML es el lenguaje de marcado más importante de todo internet, cuando abres una página web cualquiera te aseguro que la estructura de la misma está escrita en HTML.

Muchos pueden dar por sentado que HTML no es tan importante pero es la base de toda la web moderna y por este motivo es que ha ido evolucionando siempre, desde API's nuevas que podemos usar hasta características más simples pero importantes de conocer.

2. Acordeón en HTML5

Los acordeones en HTML se escriben usando la etiqueta details y anidando etiquetas summary para representar cada acordeón.
Antes de los acordeones exclusivos no era posible que el comportamiento de cada acordeon sea independiente usando solo HTML nativo, esto quiere decir que múltiples acordeones podían estar abiertos al mismo tiempo. Veamos un ejemplo:

En este ejemplo podemos notar que los acordeones pueden estar abiertos al mismo tiempo que es el comportamiento por defecto.

3. Acordeón exclusivo en HTML5

Desde septiembre del 2024 la novedad es que podemos crear acordeones exclusivos de manera nativa sin usar nada de JavaScript.

Un acordeón exclusivo permite que solo una etiqueta summary esté abierta, mejorando la UI sin complicarnos escribiendo código JS para lograr esto.

Para conseguirlo basta con agregar el atributo name con el mismo valor a cada etiqueta summary.
Veamos un ejemplo:

En nuestro ejemplo cada summary tiene name="learn-css" lo que permite que el acordeón sea exclusivo.

4. ¿Y el Can I Use?

Podemos encontrar que esta funcionalidad está disponible desde las siguientes versiones de navegadores:

img

Y consultando Can I Use verificamos lo mismo teniendo un 89.13% de los navegadores cubiertos a la fecha de la publicación de este post.

img

5. Referencias

6. Conclusiones

Es muy importante estar al día con las últimas novedades de las herramientas que más usamos, estas características nuevas nos pueden salvar más de una vez facilitando nuestro trabajo.

Te dejo un post resumen en mi cuenta de twitter:


Otros post de mi autoría que te pueden interesar:

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay