Etiqueta HTML <details>

Definición y uso

<details> La etiqueta define otros detalles que el usuario puede abrir y cerrar a voluntad.

<details> La etiqueta se utiliza generalmente para crear widgets interactivos que el usuario puede abrir y cerrar. Por defecto, los widgets están cerrados. Al abrirlos, se expanden y se muestra su contenido.

Se puede colocar cualquier tipo de contenido dentro de <details> dentro de la etiqueta.

Consejo:<summary> etiqueta con <details> Al combinarlos, se puede especificar un título visible para los detalles. Al hacer clic en el título, se mostrará <details> Definir el contenido.

Vea también:

Manual de Referencia del DOM HTML:Objeto Details

Ejemplo

Ejemplo 1

Definir detalles que el usuario pueda abrir y cerrar a voluntad:

<details>
  <summary>Centro del Mundo Futuro (Epcot Center)</summary>
  <p>Epcot es un parque temático del complejo Disney World Resort, que cuenta con atracciones emocionantes, exposiciones internacionales, fuegos artificiales galardonados y actividades estacionales.</p>
</details>

Prueba por ti mismo

Ejemplo 2

Configurar estilos de <details> y <summary> usando CSS:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>Centro del Mundo Futuro (Epcot Center)</summary>
  <p>Epcot es un parque temático del complejo Disney World Resort, que cuenta con atracciones emocionantes, exposiciones internacionales, fuegos artificiales galardonados y actividades estacionales.</p>
</details>
</body>
</html>

Prueba por ti mismo

Atributo

Atributo Valor Descripción
open open Se especifica que los detalles deben ser visibles para el usuario (abiertos).

Atributos globales

<details> La etiqueta también admite Atributos globales en HTML.

Atributos de evento

<details> La etiqueta también admite Atributos de evento en HTML.

Configuración CSS por defecto

La mayoría de los navegadores mostrarán los valores siguientes por defecto <details> Elemento:

details {
  display: block;
}

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente el elemento por primera vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0