<details> / <summary>
Elementy HTML dające wbudowany rozwijany panel (akordeon) bez JavaScriptu. <details> chowa treść za klikalnym nagłówkiem <summary>, który rozwija się i zwija. Dostępne i obsługiwane z klawiatury od ręki.
Mechanika: wstawiasz treść do <details>, a na początku <summary>; przeglądarka pokazuje tylko podsumowanie, aż do kliknięcia, po którym treść się rozwija. Atrybut open steruje stanem i go odzwierciedla. Zastosowania: sekcje FAQ, rozwinięcia „czytaj więcej”, zwijane panele, spoilery — wszystko, co dawniej wymagało JS do pokazywania i ukrywania. Nowszy dodatek: atrybut name sprawia, że kilka elementów <details> o tej samej nazwie zachowuje się jak akordeon wyłączny (otwarty tylko jeden naraz) — również bez JS. Zysk: dostępność za darmo (czytniki ekranu i klawiatura), zero kodu i działanie przy wyłączonym JS. Można go stylować przez ::details-content i animować. Klasyczny przykład funkcji HTML, która zastępuje całą kategorię widżetów JS. Pokrewne: dialog-element i popover.