Etiqueta HTML <details>
Ejemplo
Especifique detalles que el usuario pueda abrir y cerrar a pedido:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Try it Yourself »
Más ejemplos de "Try it Yourself" ("Pruébelo usted mismo") a continuación.
Definición y uso
La etiqueta <details> especifica detalles adicionales que el usuario puede abrir y cerrar a pedido.
El <details> la etiqueta a menudo se usa para crear un widget interactivo que el usuario puede abrir y cerrar. Por defecto, el widget está cerrado. Cuando está abierto, se expande y muestra el contenido dentro.
Cualquier tipo de contenido se puede colocar dentro de la etiqueta <details>.
Consejo: La etiqueta <summary> se utiliza junto con <details> para especificar un encabezado visible para los detalles.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| open | open | Especificar que los detalles deben ser visibles (abiertos) para el usuario |
Atributos globales
La etiqueta <details> también es compatible con los Atributos globales en HTML.
Atributos del evento
La etiqueta <details> también admite los Atributos de evento en HTML.
Más ejemplos
Ejemplo
Use CSS para estilo <details> y <summary>:
<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>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
Try it Yourself »
Páginas Relacionadas
Referencia DOM HTML: Objeto de Details.
Configuración CSS predeterminada
La mayoría de los navegadores mostrarán el elemento <details> con los siguientes valores predeterminados:
details {
display: block;
}
