La etiqueta <details> de HTML representa detalles adicionales que el usuario puede ver u ocultar a demanda.
Se usa con la etiqueta <summary> para proporcionar una leyenda en la que se puede hacer clic para expandir/contraer los detalles según sea necesario. Si no hay una etiqueta <summary>, el navegador debería mostrar su propio resumen/leyenda.
El elemento <details> acepta “contenido de flujo”, lo que significa que acepta la mayoría de los elementos HTML que pueden aparecer dentro del <body> de un documento HTML.
Sintaxis
La etiqueta <details> se escribe como <details></details> con una etiqueta <summary> insertada entre la etiqueta de inicio y de fin. El contenido expandible/contraíble sigue a la etiqueta <summary> (pero también está contenido entre las etiquetas de inicio y fin del elemento <details>).
Como esto:
<details>
<summary>Clic para abrir</summary>
<p>Contenido desplegable...</p>
</details>Ejemplos
Uso básico de la etiqueta
Aquí, <details> se usa junto con la etiqueta <summary> para crear contenido expandible.
<details>
<summary>Clic para Expandir</summary>
<p>Si tu navegador admite este elemento, debería permitirte expandir y contraer estos detalles.</p>
</details>See the Pen DETAILS_basico by Alex (@htmldesdecero) on CodePen.
Leyenda predeterminada
Si omites la etiqueta <summary>, el navegador debería crear su propia leyenda.
<details>
<p>Contenido colapsable...</p>
</details>See the Pen DETAILS_leyenda by Alex (@htmldesdecero) on CodePen.
Múltiples elementos <details>
Puedes tener múltiples elementos <details>, todos expandiendo y colapsando su propio contenido. Aquí es donde la etiqueta <summary> puede ser realmente útil, de lo contrario verás un montón de encabezados que dicen “Detalles” sin nada más que los distinga.
La etiqueta <details> se puede utilizar para mostrar/ocultar la mayoría de los elementos que aparecen dentro del elemento <body> de un documento HTML. Esto incluye texto, controles de formulario, imágenes, etc.
El siguiente ejemplo muestra varios elementos que se colocan dentro del elemento <details>.
<div>
<details>
<summary>General:</summary>
<p>Tipo: Imagen JPEG<br>
Tamaño: 8,697 bytes (12 KB en disco)<br>
Creado: 4 de agosto de 2024 2:20 pm<br>
Modificado: 4 de agosto de 2024 2:20 pm
</p>
</details>
<hr>
<details>
<summary>Nombre y extensión:</summary>
<p><input name="fileName" value="phi-phi-200x150.jpg"></p>
<p><input name="hideExt" type="checkbox" value="">Ocultar extensión</p>
</details>
<hr>
<details>
<summary>Vista previa:</summary>
<img src="/pix/places/phi-phi-200x150" alt="Foto de Phi Phi">
</details>
</div>div{
width:210px;
padding:5px;
background:#eee;
border:1px solid #ccc;
}See the Pen DETAILS_multiples by Alex (@htmldesdecero) on CodePen.
Aplicando estilos al elemento <details>
Puedes usar CSS para agregar estilos al elemento <details>. No solo eso, puedes usarlo para aplicar estilos al elemento en sus diversos estados (es decir, abierto y cerrado), así como al elemento <summary> dependiendo del estado del elemento <details>.
En otras palabras, puedes especificar diferentes estilos para usar tanto en <details> como en <summary> en función de si el usuario ha expandido o contraído el control.
Como esto:
<!DOCTYPE html>
<title>Ejemplo</title>
<div>
<details>
<summary>General:</summary>
<p>Tipo: Imagen JPEG<br>
Tamaño: 8,697 bytes (12 KB en disco)<br>
Creado: 4 de agosto de 2024 2:20 pm<br>
Modificado: 4 de agosto de 2024 2:20 pm
</p>
</details>
<hr>
<details>
<summary>Nombre y extensión:</summary>
<p><input name="fileName" value="phi-phi-200x150.jpg"></p>
<p><input name="hideExt" type="checkbox" value="">Ocultar extensión</p>
</details>
<hr>
<details>
<summary>Vista previa:</summary>
<img src="/pix/places/phi-phi-200x150" alt="Foto de Phi Phi">
</details>
</div>details {color:#999;}
details > summary {font-size:larger;color:#666;}
details[open] > summary { color:black;font-weight:bold; }
div {width:210px;padding:5px;background:#eee;border:1px solid #ccc;}See the Pen DETAILS_estilos by Alex (@htmldesdecero) on CodePen.
Atributos
Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.
El elemento <details> acepta los siguientes atributos.
| Atributo | Descripción |
|---|---|
open | Especifica si los detalles deben estar abiertos (visibles para el usuario) o cerrados (ocultos para el usuario). Este es un atributo booleano. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que coincida, sin distinción entre mayúsculas y minúsculas ASCII, con el nombre canónico del atributo, sin espacios en blanco iniciales o finales (es decir, open o open="open").Valores posibles: – [Cadena vacía] – open |
Atributos globales
Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes utilizar estos atributos con la etiqueta <details>, así como con todas las demás etiquetas HTML.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
Para obtener una explicación completa de estos atributos, consulta Atributos globales de HTML 5.
Controladores de eventos
Los atributos de contenido del controlador de eventos te permiten invocar un script desde tu HTML. El script se invoca cuando ocurre un determinado “evento”. Cada atributo de contenido del controlador de eventos se ocupa de un evento diferente.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
La mayoría de los atributos de contenido del controlador de eventos se pueden utilizar en todos los elementos HTML, pero algunos controladores de eventos tienen reglas específicas sobre cuándo se pueden utilizar y a qué elementos se aplican.
