Elemento details

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento details representa un trozo de contenido oculto que puede ser mostrado a pedido del usuario. Este elemento está pensado para implementar soporte nativo para contenido colapsable y es habitualmente representado por un título (provisto por el elemento summary) acompañado por una flecha que sugirere al usuario que hay más contenido que puede ser accedido. Cuando el usuario hace clic en el título o la flecha, el contenido es automáticamente mostrado.

Múltiples elementos details pueden ser perfectamente anidados para formar un conjunto de contenidos colapsables en una distribución jerárquica. Adicionalmente, el atributo open puede ser usado para hacer que el contenido del elemento sea inicialmente visible.

Un título o etiqueta puede ser provisto para el contenido colapsable. En tal caso, éste debe ser representado por un elemento summary, que debe ser el primer hijo del elemento details al cual pertenece.

El soporte provisto por los navegadores para el elemento details es incompleto. Los autores pueden tener que recurrir a programas para lograr su mismo efecto consistentemente.

Ejemplos

En el siguiente ejemplo, proveeremos un trozo de formulario (form) dentro de un elemento details. Como es de esperarse, este contenido aparecerá inicialmente oculto en los navegadores que soporten el mecanismo.

El elemento summary, apropiadamente declarado como primer hijo de nuestro details, proveerá el título que será mostrado encima del contenido, esté este oculto o no.

<form action="../../form-result.php" target="_blank">
  <p>Direción de e-mail: <input type="email" name="direccionemail"></p>
  <details>
    <summary>Opciones extra</summary>
    <p><input type="checkbox" name="enviarofertas" checked> Enviar ofertas y promociones a mi dirección de e-mail.</p>
  </details>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Direción de e-mail:

Opciones extra

Enviar ofertas y promociones a mi dirección de e-mail.

Ahora probaremos el atributo open. Cuando este atributo está presente el contenido del elemento details será inicialmente visible. De todos modos, los usuarios podrán interactuar con el elemento, abriéndolo y cerrándolo.

<p>La mayoría de procesos astrofísicos no pueden ser recreados en los laboratorios de la Tierra. En cualquier caso, existe una gran variedad de objetos astronómicos visibles a lo largo de todo el espectro electromagnético. El estudio de dichos objetos mediante la adquisición pasiva de datos es el objetivo de la astronomía observacional.</p>
<details open>
  <summary>Galileo Galilei</summary>
  <img src="/assets/images/galileo-galilei.jpg" style="float: right; margin: 0 0 1em 2em" alt="Galileo Galilei, padre de la astronomía observacional moderna">
  <p>Galileo Galilei fue un astrónomo, filósofo, ingeniero, matemático y físico italiano, relacionado estrechamente con la revolución científica. Eminente hombre del Renacimiento, mostró interés por casi todas las ciencias y artes (música, literatura, pintura).</p>
  <p>Sus logros incluyen la mejora del telescopio, gran variedad de observaciones astronómicas, la primera ley del movimiento y un apoyo determinante al copernicanismo.</p>
</details>

La mayoría de procesos astrofísicos no pueden ser recreados en los laboratorios de la Tierra. En cualquier caso, existe una gran variedad de objetos astronómicos visibles a lo largo de todo el espectro electromagnético. El estudio de dichos objetos mediante la adquisición pasiva de datos es el objetivo de la astronomía observacional.

Galileo Galilei Galileo Galilei, padre de la astronomía observacional moderna

Galileo Galilei fue un astrónomo, filósofo, ingeniero, matemático y físico italiano, relacionado estrechamente con la revolución científica. Eminente hombre del Renacimiento, mostró interés por casi todas las ciencias y artes (música, literatura, pintura).

Sus logros incluyen la mejora del telescopio, gran variedad de observaciones astronómicas, la primera ley del movimiento y un apoyo determinante al copernicanismo.

Atributos

Atributos específicos

open

Un valor booleano que indica si el contenido de este elemento debería ser inicialmente visible u oculto. Si este atributo toma el valor "open", o la cadena vacía (""), o si está simplemente presente, el contenido del elemento será inicialmente visible.

Ejemplo

<details open>
  <summary>Hippie</summary>
  <p>Se llama hippie, hippy o jipi a un movimiento contracultural, libertario y pacifista, nacido en los años 1960 en Estados Unidos, así como también a los seguidores de dicho movimiento. La palabra hippie deriva del inglés hipster que solía usarse para describir a la subcultura previa de los beatniks (término relacionado pero no idéntico al de Generación Beat), que tuvo como base importante la ciudad estadounidense de San Francisco (California) y su distrito Haight-Ashbury.</p>
</details>
Hippie

Se llama hippie, hippy o jipi a un movimiento contracultural, libertario y pacifista, nacido en los años 1960 en Estados Unidos, así como también a los seguidores de dicho movimiento. La palabra hippie deriva del inglés hipster que solía usarse para describir a la subcultura previa de los beatniks (término relacionado pero no idéntico al de Generación Beat), que tuvo como base importante la ciudad estadounidense de San Francisco (California) y su distrito Haight-Ashbury.

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.