¿Qué proporcionan los elementos details y summary?

Question

Accepted Answer

`

` y `

` crean un **widget de divulgación nativo** — una sección expandible/contraíble — **sin JavaScript**. El navegador maneja el toggle, la compatibilidad con teclado y la accesibilidad por usted. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** es la etiqueta en la que se puede hacer clic (el primer hijo). - Todo después de ella es el contenido contraíble. - Hacer clic en summary cambia entre abierto/cerrado — natively accesible mediante teclado (Enter/Space) y anunciado correctamente por lectores de pantalla. ## Abierto por defecto y detección de estado ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## Estilizando el marcador ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Casos de uso reales Acordones FAQ, secciones "mostrar más", barras laterales contraíbles, texto spoiler, filas de tabla expandibles. Antes de este elemento, cada acordeón necesitaba JavaScript más cableado ARIA para la accesibilidad — ahora son solo dos etiquetas semánticas. ## Por qué es importante `

`/`

` te dan contenido contraíble accesible y amigable con el teclado sin JS y sin ARIA manual — un ejemplo perfecto de usar la plataforma. Recúrrelo para FAQs y patrones de "mostrar más" antes de construir un acordeón personalizado.