Anzeige
Anzeige
News
Artikel merken

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.

Von Denis Potschien
2 Min. Lesezeit
Anzeige
Anzeige
HTML5-Logo

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>
Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
<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:

Anzeige
Anzeige
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:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
7 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Tipo

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

Antworten
Denis Potschien

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

Antworten
Tipo

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

Antworten
ConnyLo

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

Antworten
psren

„@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
marius

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

Antworten
Webstandard-Blog

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

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige