Vorheriger Artikel Nächster Artikel

HTML5-Howto: Aufklappboxen ohne JavaScript

Beliebte Elemente zum Strukurieren von Inhalten in sind Aufklappboxen. Um viel Inhalt übersichtlich zu halten, werden Absätze versteckt und oftmals nur die Überschriften angezeigt. Mit einem Klick auf die Überschrift wird der dazugehörige Text sichtbar. Bisher ließen sich solche Aufklappboxen nur mit realisieren, was zu Nachteilen in Sachen Zugänglichkeit führt, wenn man ohne aktivem JavaScript unterwegs ist.

HTML5-Howto: Aufklappboxen ohne JavaScript
Mit HTML5 gibt es zwei neue Elemente – SUMMARY und DETAILS –, die genau diese Funktionalität mit sich bringen, ohne dass auf JavaScript gesetzt werden muss.

So werden die neuen HTML5-Elemente eingesetzt

Mit dem DETAILS-Element wird ein beliebiger Inhalt, der auf- und zuklappbar sein sein soll, umschlossen. Dieser Inhalt wird standardmäßig nicht dargestellt. Darin enthalten sein muss ein SUMMARY-Element, welches immer sichtbar dargestellt wird:

<details>
<summary>Überschrift</summary>
<p>Hier steht der Text, der auf- und zugeklappt werden soll.</p>
</details>

Es können natürlich auch Bilder, Tabellen, Listen etc. eingebunden werden. Dargestellt wird der Inhalt des SUMMARY-Elementes mit einem nach rechts gerichtetem Pfeil. Mit einem Klick auf das Element wird der komplette Inhalt des DETAILS-Elementes angezeigt und der Pfeil zeigt nach unten.

HTML5: Aufklappbox mit DETAILS und SUMMARY
HTML5: Aufklappbox mit DETAILS und SUMMARY (links: zugeklappt, rechts: aufgeklappt)

Es spielt übrigens keine Rolle, ob das SUMMARY-Element an oberste Stelle innerhalb des DETAILS-Elementes steht. Es wird immer an oberster Stelle dargestellt.

Mit dem optionalen Attribut „open“ lässt sich ein DETAILS-Element auch geöffnet darstellen. Gerade bei mehreren Aufklappboxen untereinander wird oftmals die erste Box geöffnet dargestellt:

<details open="open">
<summary>Überschrift 1</summary>
<p>Hier steht der Text, der auf- und zugeklappt werden soll.</p>
</details>

<details>
<summary>Überschrift 2</summary>
<p>Hier steht der Text, der auf- und zugeklappt werden soll.</p>
</details>

Verschachtelte Aufklappboxen

Das DETAILS-Element lässt sich auch beliebig ineinander verschachteln. So lassen sich auch komplexe Inhalte übersichtlich darstellen. Mit entsprechenden Styles lassen sich die verschachtelten Elemente einrücken:

<details open="open">
<summary>Überschrift</summary>
<p>Hier steht der Text, der auf- und zugeklappt werden soll.</p>

<details style="margin-left:10px">
<summary>Überschrift</summary>
<p>Hier steht der Text, der auf- und zugeklappt werden soll.</p>
</details>

<p>Hier steht mehr Text.</p>
</details>

CSS-Angaben für das SUMMARY-Element

Über Stylesheets lassen sich die beiden HTML5-Elemente wie gewohnt anpassen. Mit der Eigenschaft „details-marker“ beziehungsweise „-webkit-details-marker“ (derzeit funktioniert nur die Vender-Variante) lässt sich der Pfeil ausschalten. Per CSS lassen sich auch alternative Zeichen darstellen. Im folgenden Beispiel wird der Pfeil durch ein Pluszeichen (bei nicht sichtbaren Inhalt) und durch ein Minuszeichen (bei sichtbaren Inhalt ersetzt:

summary::-webkit-details-marker {
  display: none
}

summary:after {
  content: "+";
  float: left;
  margin-right: 5px;
}

details[open] summary:after {
  content: "-";
}

Aufgrund mangelnder Browserunterstützung sollte derzeit die Funktionalität über ein JavaScript-Fallback abgesichert werden. Browser, die die beiden HTML5-Elemente noch nicht unterstützen, zeigen die beiden neuen Elemente als normale Blockelemente an.

Wie geht ihr mit neuen HTML5-Elementen um, die derzeit noch mit einer geringen Browserunterstützung auskommen müssen?

Weiterführende Links zum Thema HTML5:

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
7 Antworten
  1. von Tipo am 18.10.2011 (16:01 Uhr)

    Wenn dieses Element vom Browser nicht verstanden wird, wird dann dennoch der Inhalt innerhalb der Box angezeigt oder bleibt dieser Verborgen?

    Antworten Teilen
  2. von denis.potschien am 18.10.2011 (16:03 Uhr)

    @Tipo: Der Inhalt wird dargestellt. Der Browser interpretiert die beiden Elemente als einfaches Blockelement wie zum Beispiel das DIV-Element.

    Antworten Teilen
  3. von Tipo am 18.10.2011 (16:19 Uhr)

    @Denis; Danke, steht ja auch im Text, ich schien das aber irgendwie überlesen zu haben.

    Antworten Teilen
  4. von ConnyLo am 18.10.2011 (17:08 Uhr)

    Hhmm, wie sieht die Fallback JavaScript Lösung aus? Reicht es, eines der bekannten Frameworks und Sanitizer zu nutzen?

    Antworten Teilen
  5. von psren am 18.10.2011 (17:09 Uhr)

    "@Tipo: Der Inhalt wird dargestellt. Der Browser interpretiert die beiden Elemente als einfaches Blockelement wie zum Beispiel das DIV-Element."
    ich dachte immer man muss die auf block setzen, weil sie als inline interpretiert werden?!

    Antworten Teilen
  6. von marius am 18.10.2011 (19:29 Uhr)

    Hallo,
    ist heute eure Rechtschreibprüfung ausgefallen? :-/
    "nur die Überschriftren"
    Mit besten Grüßen
    Marius
    Lv99.de

    Antworten Teilen
  7. von Webstandard-Blog am 19.10.2011 (13:39 Uhr)

    Dieses Verhalten ist auch ausschließlich mit CSS3 Transition zu erreichen und das ganz unabhängig des Einsatzes von HTML5.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos

TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr … » weiterlesen

Der schönste Tag eures Lebens: W3C stellt HTML5 fertig
Der schönste Tag eures Lebens: W3C stellt HTML5 fertig

Heute schon in HTML5 geschrieben? Spätestens jetzt ist der richtige Zeitpunkt dafür, denn die W3C hat HTML5 zur „Recommendation“ gekührt, was de facto den Abschluss des Standardisierungs-Prozes … » weiterlesen

Google Analytics: Kinderleichtes Tracking mit Boba.js
Google Analytics: Kinderleichtes Tracking mit Boba.js

Boba.js macht das Tracking von Events mit Google Analytics zum Kinderspiel. Wir verraten dir, wie du die Bibliothek in deine Seite einbaust und einsetzt. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen