Drücke die Tasten ◄ ► für weitere 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 JavaScript 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 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:

64 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
14 Antworten
  1. von Tipo am 18.10.2011 (16:01Uhr)

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

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

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

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

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

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

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

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

    "@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?!

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

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

  7. von HTML5-Howto: Aufklappboxen ohne JavaScri… am 18.10.2011 (21:11Uhr)

    [...] HTML5-Howto: Aufklappboxen ohne JavaScript Beliebte Elemente zum Strukurieren von Inhalten sind Aufklappboxen. Um viel Inhalt übersichtlich zu halten, werden Absätze versteckt und oftmals nur die Überschriftren angezeigt. Source: t3n.de [...]

  8. von HTML5-Howto: Aufklappboxen ohne JavaScri… am 18.10.2011 (21:13Uhr)

    [...] HTML5-Howto: Aufklappboxen ohne JavaScript Beliebte Elemente zum Strukurieren von Inhalten sind Aufklappboxen. Um viel Inhalt übersichtlich zu halten, werden Absätze versteckt und oftmals nur die Überschriftren angezeigt. Source: t3n.de [...]

  9. von Webstandard-Blog am 19.10.2011 (13:39Uhr)

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

  10. von HTML5: Aufklappboxen – ohne JavaSc… am 27.10.2011 (20:46Uhr)

    [...] Dieses Mal geht es darum, wie man ganz ohne JavaScript, nur mit HTML5, Aufklappboxen realisieren kann: t3n.de. [...]

  11. von [KW42] Themen der Woche › Dein IT Blog am 30.10.2011 (23:44Uhr)

    [...] HTML5 in Aktion: Drop-Down-Feldern ohne JavaScript [...]

  12. von [KW42] Themen der Woche » IT::fsin… am 31.10.2011 (11:51Uhr)

    [...] HTML5 in Aktion: Aufklappboxen ohne JavaScript [...]

  13. von HTML5: Neue Aufgaben für die Elemente S… am 09.01.2012 (14:25Uhr)

    [...] HTML5-Howto: Aufklappboxen ohne JavaScript - t3n News [...]

  14. von HTML5: Neue Formulartypen in der Praxis… am 09.01.2012 (14:43Uhr)

    [...] HTML5-Howto: Aufklappboxen ohne JavaScript - t3n-News Weitere Artikel zu HTML, HTML5 und jQuery Kommentare: 17 Tweets: 29 Facebook-Likes: 6 29.11.2011 Ads_BA_AD("FOOT"); Das könnte dich auch interessieren: HTML5Eingabefeld mit Vorschlägen als DropdownlisteEingabefelder von Formularen werden gerne mit einer Dropdownliste ausgestattet, in der Vorschläge für...HTML5-HowtoAufklappboxen ohne JavaScriptBeliebte Elemente zum Strukurieren von Inhalten sind Aufklappboxen. Um viel Inhalt übersichtlich zu halten, werden...HTML5Neue Aufgaben für die Elemente SMALL, B und IBevor man anfing, Inhalt und Gestaltung einer Website strikt voneinander zu trennen – und CSS die Aufgabe der...HTML5Eigene Attribute für Elemente erstellenManchmal ist es notwendig, einem HTML-Element zusätzliche Informationen zu übergeben, für die sich jedoch kein... [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema JavaScript
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

Skytte: Das beste HTML5-Browsergame aller Zeiten?
Skytte: Das beste HTML5-Browsergame aller Zeiten?

Hier könnt ihr nicht nur ein cooles HTML5-Browsergame spielen – wir geben euch auch einen kleinen Einblick zur Produktion von Skytte. » weiterlesen

HTML5: 15 Screencasts, Tutorials und Artikel für Einsteiger
HTML5: 15 Screencasts, Tutorials und Artikel für Einsteiger

Wer sich mit Webentwicklung und Webdesign befasst, weiß: An HTML5 führt kein Weg vorbei. Eine Sammlung von 15 Screencasts, Tutorials und Artikeln richtet sich an HTML5-Einsteiger – die einzelnen.. ... » weiterlesen

Kennst Du schon unser t3n Magazin?

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