– Today I Learned …

Details

<details> gehört zu den interaktiven Elementen einer Website

mit dem HTML-Element <details> lassen sich seit längerem Teile der Website auf- und zuklappen

als „Auslöser“ bzw. „Etikett“ dient hierfür ein Klick auf das zugehörige <summary>-Element, das vom Browser gewöhnlich mit ▶ gekennzeichnet wird

<details>
	<summary>mehr …</summary>
	Und hier steht Weiteres …
</details>

um ein <details>-Element am Bildschirm bereits geöffnet darzustellen, dient das Attribut open

gibt es jedoch mehrere derartige Elemente auf einer Seite und man möchte, dass immer nur eines davon geöffnet ist, so war bisher der Einsatz von Javascript unumgänglich

seit Kurzem lässt sich so genanntes Akkordeon-Verhalten ohne JS realisieren: dazu ordnet man allen <details>-Elementen, die eine einheitliche Gruppe bilden sollen, vor der jedoch immer nur ein Element geöffnet sein soll, ein gleichlautendes name=""-Attribut zu

moderne Browser interpretieren anhand des Gruppennamens, welche Elemente zu schließn bzw. zu öffnen sind

<details name="bsp">
	<summary>mehr …</summary>
	Und hier steht Weiteres …
</details>
<details name="bsp">
	<summary>noch mehr …</summary>
	Und hier steht was Anderes …
</details>

die optische Gestaltung unterliegt normalem CSS

Hinweis:
<details>-Elemente lassen sich mit unterschiedlichem name-Attribut gut verschachteln …