explain --technique details-summary
El elemento <details> es un widget de disclosure nativo de HTML.
El navegador gestiona el estado abierto/cerrado sin JS.
Cuando el usuario hace clic en <summary>, el navegador
añade el atributo
y muestra el contenido interior automáticamente.
CSS puede reaccionar con:
El navegador gestiona el estado abierto/cerrado sin JS.
Cuando el usuario hace clic en <summary>, el navegador
añade el atributo
open al elemento <details>y muestra el contenido interior automáticamente.
CSS puede reaccionar con:
details[open] { ... }
<!-- HTML — el disclosure nativo --> <details class="nav-mobile"> <!-- summary = el trigger clickeable --> <summary> Menú ▾ </summary> <!-- Visible cuando details tiene [open] --> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Nosotros</a></li> ... </ul> </details> /* CSS — estilizar el estado abierto */ details[open] summary { color: var(--green); background: var(--green-faint); } /* Ocultar/mostrar texto según estado */ details[open] .chevron-open { display: none; } details:not([open]) .chevron-close { display: none; }