Elemento details en HTML

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 contenidoUn elemento organizativo, un elemento divisional y un elemento interactivo.
Contenido permitidoUn solo elemento <summary> seguido de contenido normal.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normativo.
Interfaz DOMOHTMLDetailsElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
1249Soportado615

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;
}