Texte zeigen oder verbergen mit <details> und <summary>

(Stand: Januar 2017) Gerade auf Smartphones ist Platz kostbar. Aber auch auf dem Desktop ist es mitunter sinnvoll, Inhalte nur bei Bedarf ainzublenden. HTML5 bringt mit den Elementen details und summary alles nötige mit, um ganze Bereiche zu verstecken. Mehrfach hintereinander eingesetzt, entsteht das, was Webdesigner ein „Akkordeon“ nennen: eine Liste von Elementen, die jeweils ein- und ausgeklappt werden können.

Überlassen Sie mit details und summary dem Besucher einer Webseite die Entscheidung, Texte anzuzeigen oder zu verbergen

Hier ein Beispiel

Summary (klick mich zum öffnen)

Artikel-Überschrift

Lorem ipsum…

Summary (klick mich zum öffnen)

Artikel-Überschrift Nummer 2

Lorem ipsum…

Summary (klick mich zum öffnen)

Artikel-Überschrift Nummer 2

Lorem ipsum…

Die Umsetzung ist sehr simpel und von Haus aus barrierefrei (wie immer, wenn HTML bestimmungsgemäß eingesetzt wird).

HTML

 <details>
  <summary>Summary (klick mich)</summary>
  Lorem ipsum...
</details>

Das Element details kann dabei mehr als nur Text enthalten. Sämtliche HTML-Elemente sind erlaubt. Es ist auch möglich den Browser anzuweisen, den Inhalt von details schon beim Laden der Seite anzuzeigen. Geben Sie hierzu einfach das Attribut open an:

Beispiel

Summary (klick mich zum öffnen)

Artikel-Überschrift

Lorem ipsum…

Summary (klick mich zum schließen)

Artikel-Überschrift Nummer 2

Lorem ipsum…

Summary (klick mich zum öffnen)

Artikel-Überschrift Nummer 2

Lorem ipsum…

HTML

<details>
  <summary>Summary (klick mich zum <strong>öffnen</strong>)</summary>
  <h4>Artikel-Überschrift</h4>
  <p>Lorem ipsum...</p>
</details>
<details open>
  <summary>Summary (klick mich zum <strong>schließen</strong>)</summary>
  <h4>Artikel-Überschrift Nummer 2</h4>
  <p>Lorem ipsum...</p>
</details>
<details>
  <summary>Summary (klick mich zum <strong>öffnen</strong>)</summary>
  <h4>Artikel-Überschrift Nummer 2</h4>
  <p>Lorem ipsum...</p>
</details>

Leider unterstützen derzeit weder Firefox Edge noch InternetExplorer diese Elemente (details auf caniuse). Glücklicherweise hat sich ein freundlicher Belgier namens Matthias Bynens hingesetzt und ein Polyfill geschrieben, dass bei fehlender Unterstützung die korrekte Verhaltensweise emuliert. Dies stellt er als jQuery-Plugin zur Verfügung:
http://mathiasbynens.be/demo/html5-details-jquery

Stand des Artikels „Texte zeigen oder verbergen mit <details> und <summary>“: Januar 2017