t3n News Entwicklung

HTML5-Howto: Aufklappboxen ohne JavaScript

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:

Hänge dich jetzt an unsere Facebook-Seite und sichere dir deinen #Wissensvorsprung!
t3n gefällt mir!
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
Abo-Bundle für Entwickler: „HTML5, JavaScript und jQuery“ von dpunkt gratis sichern [t3n-Aktion]
Abo-Bundle für Entwickler: „HTML5, JavaScript und jQuery“ von dpunkt gratis sichern [t3n-Aktion]

Du hast Grundkenntnisse in HTML5, JavaScript und jQuery und möchtest einen Quereinstieg wagen? Dann ist unsere Aktion genau das richtige für dich, denn als einer der schnellsten 30 Neuabonnenten … » weiterlesen

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

HTML5-Animationen leicht gemacht: Mit Tumult Hype 3 geht die Post ab
HTML5-Animationen leicht gemacht: Mit Tumult Hype 3 geht die Post ab

HTML5-Animationen liegen im Trend und haben Flash fast vollständig abgelöst. Um HTML5-Animationen weiter voranzutreiben, braucht es aber nicht nur Browser-Support, sondern auch die nötigen … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen