Etiqueta details de HTML

La etiqueta details de HTML se utiliza para crear un elemento de contenido plegable, que permite a los usuarios expandir o contraer una sección de información adicional.

Es lo que comúnmente conocemos como Acordeón HTML. Son etiquetas que aportan características interactivas a una página o documento. Es decir que, el usuario debe tomar parte de forma activa para activarlas.

Gracias a esta etiqueta, es muy fácil de crear una lista de elementos, que podemos ocultar o mostrar, utilizando únicamente etiquetas de HTML, sin Javascript.

Se usa en conjunto con la etiqueta <summary> que proporciona el título o encabezado para la sección plegable. Cuando se carga la página web, el contenido dentro de la etiqueta <details> está oculto, y los usuarios pueden hacer clic en el título de <summary> para revelar u ocultar el contenido.

Aquí hay una explicación detallada de cómo funciona la etiqueta <details>:

1. <details>: Esta etiqueta es el contenedor principal para el contenido plegable. Dentro de está etiqueta puedes utilizar cualquier contenido HTML, como texto, imágenes, listas, tablas u otros elementos.
2. <summary>: Esta etiqueta se utiliza para indicar el título o encabezado de la sección plegable. Se coloca dentro de la etiqueta <details> y se muestra antes de que el usuario haga clic en ella para expandir o contraer el contenido.
3. Expansión y Contracción: Cuando se carga la página web, el contenido dentro de <details> está oculto. Para ver el contenido oculto, los usuarios pueden hacer clic en el título que se encuentra dentro de <summary>. Cuando hacen clic, el contenido se expandirá, revelando su contenido. Si vuelven a hacer clic en el título, el contenido se contraerá nuevamente.
4. El icono. Por defecto, el icono es una flecha hacia la derecha, cuando elemento esta cerrado. Y cambia por una flecha hacia abajo cuando se despliega el contenido.

Un ejemplo simple de como utilizar la etiqueta details de HTML

 <h1>Contenido Plegable</h1>

<details>
    <summary>¿Qué es HTML?</summary>
    <p>HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Permite la estructuración y presentación de contenido en la web.</p>
</details>

<details open>
    <summary>¿Qué es CSS?</summary>
    <p>CSS (Cascading Style Sheets) es un lenguaje utilizado para definir la presentación y el diseño de páginas web. Permite controlar colores, fuentes, márgenes y más.</p>
</details>

En este ejemplo, hemos creado dos secciones plegables con contenido oculto. Los títulos de estas secciones se encuentran dentro de las etiquetas <summary>, y los usuarios pueden hacer clic en ellos para expandir o contraer el contenido debajo de cada título.

Puedes personalizar el contenido dentro de <details> y <summary> según tus necesidades. Esto es útil para mostrar información adicional de manera organizada en tu sitio web.

El atributo open de la etiqueta details de HTML

La etiqueta <details> tiene un atributo open, que indica que el contenido del desplegable estará visible por defecto, por lo que pulsando encima lo contraemos.

Esto puede ser muy interesante en algunas situaciones donde el contenido es muy importante y merece la pena estar mostrado por defecto. El atributo open puede usarse en una o varias de las etiquetas details que tengamos en la pagina.

<details open>
    <summary>Contenido desplegado</summary>
    <p>Al tener el atributo open, este contenido estará desplegado y visible por defecto.</p>
</details>

<details>
    <summary>Contenido contraído</summary>
    <p>Este contenido estará contraído y no será visible por defecto.</p>
</details>

Es importante destacar que al tratarse de un atributo, podemos utilizar JavaScript y el DOM para mostrarlo u ocultarlo de forma dinámica. Esto lo podemos hacer a través del evento toogle.

Personalizar el estilo de la flecha

Por defecto, los navegadores suelen identificar el elemento desplegable mediante una flecha hacia la derecha o hacia abajo, dependiendo de si el desplegable está colapsado o desplegado, respectivamente.

Mediante un poco de CSS, podemos cambiar el icono de la flecha que viene por defecto, haciendo uso del pseudoelemento ::marker sobre la etiqueta <summary> de esta forma:

/* Flecha para el elemento cerrado */
details summary::marker {
  content: "➡️​ ";
  color: indigo;
  font-size: 1.5rem;
}

/* Flecha para el elemento abierto */
details[open] summary::marker {
  content: "⤵️​ ";
}

Ahora si, ya puedes crear, en tu próximo proyecto, una lista de elementos desplegables usando únicamente la etiqueta details de HTML.

Te comparto un ejemplo completo, con el poquito CSS requerido para modificar los iconos de las flechas, directamente desde mi CodePen, para que lo pruebes, lo modifiques, lo copies y te lo lleves.

Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.

Y si quieres ganar algo de dinero sin esfuerzo, registrate en IPRoyal desde este banner y recibí 1 dolar de regalo al comenzar a usar la aplicación para generar ingresos pasivos.

Acá puedes conocer más sobre ingresos pasivos, que es y como funciona IPRoyal Pawns.