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.
Tabla de contenidos
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.
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>
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 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.