Elemento details en HTML

El elemento html details se utiliza para mostrar información adicional al usuario que puede mostrar y ocultar cuando lo desee. Se puede colocar cualquier tipo de contenido dentro del elemento <details>, y su contenido está oculto de forma predeterminada (a menos que se establezca la propiedad open).

Ejemplo de uso de elemento <details> con elemento <summary>, tenga en cuenta que la propiedad open hará que el navegador muestre el contenido al cargar la página:

< details > 
  < summary > un detalle </ summary > 
  < p > Información adicional sobre el primer detalle </ p > 
</ details >

< details open > 
  < summary > otro detalle </ summary > 
  < p > Información adicional sobre el segundo resumen </ p > 
</ details >

Etiqueta html details

Clasificaciones de contenido	Un elemento organizativo, un elemento divisional y un elemento interactivo.
Contenido permitido	Un solo elemento `<summary>` seguido de contenido normal.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normativo.
Interfaz DOMO	`HTMLDetailsElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
12	49	Soportado	6	15

Características

En este elemento details se pueden utilizar propiedades globales.

`open`

Valor booleano que indica si los detalles serán visibles para el usuario inmediatamente después de que se cargue la página, el valor predeterminado es false que el contenido está inicialmente oculto.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <details> con la propiedad establecida display en block:

details {
  display: block;
}