<details> / <summary>
HTML-elementen die zonder JavaScript een ingebouwde uitklapper of accordeon geven. <details> verbergt zijn inhoud achter een aanklikbare <summary>-kop die open- en dichtklapt. Standaard toegankelijk en bruikbaar met het toetsenbord.
Werking: zet inhoud in <details> met een <summary> vooraan. De browser toont alleen de samenvatting tot er geklikt wordt, waarna de inhoud openklapt. Het attribuut open stuurt de status aan en weerspiegelt die. Toepassing: FAQ-secties, "lees meer"-uitbreidingen, inklapbare panelen, spoilers; alles wat vroeger JS nodig had om te tonen en te verbergen. Nieuwer: met het attribuut name gedragen meerdere <details> met dezelfde naam zich als exclusieve accordeon (er is er maar één tegelijk open), eveneens zonder JS. Voordeel: gratis toegankelijkheid (werkt met schermlezers en toetsenbord), geen code, en het werkt ook als JS uit staat. Is op te maken met ::details-content en te animeren. Een klassiek voorbeeld van een HTML-functie die een hele categorie JS-widgets vervangt. Verwant aan dialog-element en popover.