Los acordeones son un patrón común en interfaces web para mostrar y ocultar información de manera interactiva. Tradicionalmente, se han implementado con JavaScript y CSS, pero HTML ofrece una alternativa nativa con la etiqueta details, simplificando su uso y mejorando la accesibilidad.
Resultado
Implementación con <details>
El siguiente código muestra cómo usar <details> para crear un conjunto de acordeones sin necesidad de JavaScript:
<div class="container py-5">
<details name="dev-technologies">
<summary>JavaScript</summary>
<p>JavaScript – An essential language for web development, allowing interactivity on websites and running in browsers. It is also used in backend development with Node.js.</p>
</details>
<details name="dev-technologies">
<summary>Python</summary>
<p>Known for its simple syntax and versatility, it is used in web development, automation, artificial intelligence, data science, and more.</p>
</details>
<details name="dev-technologies">
<summary>Java</summary>
<p>A widely used object-oriented language for enterprise applications, mobile development (Android), and backend systems.</p>
</details>
<details name="dev-technologies">
<summary>C++</summary>
<p>A powerful and efficient language used in game development, high-performance software, and operating systems.</p>
</details>
<details name="dev-technologies">
<summary>C# </summary>
<p>Developed by Microsoft, it is popular for game development with Unity, enterprise applications, and desktop software on Windows.</p>
</details>
</div>Estilización con CSS
Podemos mejorar la apariencia de estos acordeones con estilos personalizados:
.container {
max-width: 500px;
}
details {
interpolate-size: allow-keywords;
overflow: hidden;
* {
margin: 0;
}
summary {
list-style: none;
border-bottom: 1px solid currentColor;
position: relative;
display: flex;
align-items: center;
width: 100%;
line-height: 1.3;
padding-block: 1rem;
&:after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-inline-start: auto;
content: "";
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transition: transform 0.2s ease-in-out;
}
+* {
padding-top: 1rem;
}
}
&[open] {
margin-block-end: 1rem;
summary {
&:after {
transform: rotate(-180deg);
}
}
}
&::details-content {
block-size: 0;
transition: block-size .25s, content-visibility 25s, padding 25s;
transition-behavior: allow-discrete;
}
&:open::details-content {
block-size: auto;
}
}Este CSS:
- Añade un borde inferior a cada acordeón.
- Hace que el
<summary>sea clickeable y tenga una flecha indicadora. - Gira la flecha cuando el acordeón está abierto.
Compatibilidad en Navegadores
La etiqueta details> es compatible con la mayoría de los navegadores modernos, incluyendo Chrome, Edge, Firefox, y Safari. Sin embargo, versiones antiguas de Internet Explorer no la soportan. Se recomienda probar en los navegadores objetivo y, si es necesario, agregar un fallback con JavaScript.
Conclusión
Usar <details> para acordeones es una solución elegante, accesible y sin dependencias de JavaScript. Facilita la implementación y mejora la experiencia del usuario con un comportamiento nativo en los navegadores modernos.