Etiqueta details HTML5: Mostrar información complemetaria sobre un elemento del DOM

Sencillo post para repasar la etiqueta details HTML5, dicha nueva etiqueta tiene como funcionalidad ofrecer y mostrar información complementaria y/o adicional de un elemento de la web.

Su comportamiento es como la de un widget que muestra y oculta información (Como un menú con efecto acordeón). Un ejemplo sería las especificaciones técnicas de un producto en el típico carrito de la compra.

Otras etiquetas HTML5 interactivas con funciones similares son:

• menu
• command
• dialog

Sintaxis de etiqueta details HTML5

Vamos con la sintaxis de este elemento HTML5 extraída de su web oficial:

<details>
    <summary>Sumario explicativo</summary>
    <p>Datos y texto, Datos y texto, Datos y texto, Datos y texto</p>
</details>

Tal y como podéis ver la sintaxis es sencilla, en muchas ocaciones se usa la etiqueta summary para añadir un título informativo del contenido a mostrar.

Existe el Atributo open (Opcional) que sirve para mostrar la etiqueta details abierta por defecto. Su código es el siguiente.

<details open="open"></details>

Por defecto la etiqueta se muestra cerrada en vez de abierta.

Ejemplos de la etiqueta details HTML5

Os pongo este ejemplo de la etiqueta details para que podáis ver su funcionamiento (Probado en Chrome):

<details open="open">
    <summary>Colores RGB</summary>
    <p>Los colores RGB son el rojo, verde y azul.</p>
</details>

En este primer ejemplo podéis ver que la etiqueta details se muestra abierta por defecto gracias al atributo open. Probad a clickar en la flecha de la izquierda para ver como se cierra y abre.

<details>
  <summary>Colores RGB</summary>
  <p>Los colores RGB son el rojo, verde y azul.</p>
</details>

Mientras que en este otro ejemplo la etiqueta se muestra cerrada por defecto.

Con esta etiqueta nos podemos ahorrar varias líneas de código que anteriormente hacíamos con jQuery o lenguajes similares.