Aufklappbare Details

Zu viel Information oder zu viele Bedienelemente gleichzeitg wirken erschlagend und verwirrend auf Anwender. In manchen Fällen ist es deshalb sinnvoll, vollständige Inhalte nur auf explizite Anforderung des Anwenders hin anzuzeigen. Lösbar war diese Aufgabe schon seit langem, jedoch erforderte sie Scripting. HTML5 führt eine Möglichkeit ein, um aufklappbare Details direkt in HTML zu definieren.

Beispiel

<details>
  <summary>Übungen zu Kapitel 1</summary>
  <ul>
   <li><a href="/?exercise=A1E1">Grammar: simple past tense</a></li>
   <li><a href="/?exercise=A1E2">Vocabulary: things to eat</a></li>
   <li><a href="/?exercise=A1E3">Fun: watch the apes</a></li>
  </ul>
</details>
<details>
  <summary>Übungen zu Kapitel 2</summary>
  <ul>
   <li><a href="/?exercise=A2E1">Story: to be the first one</a></li>
   <li><a href="/?exercise=A2E2">Grammar: would</a></li>
   <li><a href="/?exercise=A2E3">Vocabulary: traffic</a></li>
  </ul>
</details>

Erläuterung

Mit <details>…</details> markieren Sie einen Bereich, der aus einem immer angezeigten, durch Anklicken aufklappbaren Inhalt besteht. Der immer angezeigte, anklickbare Inhalt wird im unmittelbaren Anschluss an das einleitende <details>-Element mit <summary>…</summary> markiert. Der restliche Inhalt des details-Elements wird nur angezeigt, wenn er sich im aufgeklappten Zustand befindet. Das summary-Element verhält sich als Toggle-Element. Ein Klick öffnet den Inhalt, der nächste Klick schließt ihn wieder, der übernächste öffnet ihn wieder usw.

Im obigen Beispiel sind also die Texte Übungen zu Kapitel 1 und Übungen zu Kapitel 2 immer sichtbar. Beim Anklicken werden die Verweislisten unterhalb davon eingeblendet oder wieder ausgeblendet.

Weitere Hinweise

Web-Browser sollten den Inhalt des summary-Elements sichtbar als aufklappbar visualisieren, beispielsweise durch einen vorangestelllten Pfeil. Zum Redaktionszeitpunkt gab es jedoch noch keinen Browser, der die Aufklappfunktionalität von details und summary implementiert hat.

Überschriften innerhalb des details-Elements fließen nicht in die dokumentglobale Überschriftenhierarchie (Outlining) mit ein.

Referenzinformationen

HTML5 XHTML5 CHROME25.0 SAFARI6.0

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License