16. Mai 2023

HTML-„Accordion“ ohne JavaScript

Dass Accordions ein beliebtes UI-Element im Webdesign sind, hatte ich hier schon mal geschrieben. Tatsächlich kann man Accordions auch ohne HTML und im Prinzip sogar ohne CSS erstellen. Hierfür gibt es das wenig bekannte HTML5-Element „details“:

<details>
  <summary>Lorem ipsum.</summary>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</details>

Ganz ohne CSS sieht das Element so aus:

Lorem ipsum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Mit „details“ und „details[open]“ kannst du dem Element unterschiedliche Styles zuweisen.

details[open] summary {
    
}

---

HTML

---

---

Nächster Artikel
Thin Air - Kunstinstallation in London