Aufklappbare Boxen bieten sich an, um Informationen, die weniger wichtig sind oder nur für eine bestimmte Zielgruppe interessant sind, zu verbergen. So stehen sie bei bedarf zur Verfügung, nehmen aber nicht von Beginn an Platz auf der Seite ein.
Die Boxen können dabei jeden beliebigen Inhalten enthalten und stehen in mehreren optischen Variationen zur Verfügung:
Den Code für diese Boxen finden Sie im hier.
Variante 1: Grauer Hintergrund
TitelVariante 2: Transparenter Titel, graue Inhaltsbox
TitelVariante 3: Komplett transparente Box
Komplett transparenten BoxNulla facilisi. Sed sit amet ex vulputate, lobortis tellus ac, imperdiet orci. Sed luctus tempus velit, in maximus tellus aliquam quis. Suspendisse est orci, maximus in turpis vitae, fermentum laoreet felis. Nam dignissim sapien lorem, eget fringilla turpis interdum vel. Ut urna dolor, viverra sit amet tortor eu, varius porttitor urna. Donec eleifend sollicitudin lorem fringilla pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque odio turpis, vehicula sit amet erat varius, egestas scelerisque nibh. Curabitur faucibus vulputate rutrum.
Variante 4: alternatives Design
Ein Beispiel für Variante 4 im alternativen Design finden Sie hierBesondere Inhaltstypen
Beispiel mit verschiedenen Inhalten: Bilder, Videos, verschachtelte Aufklappboxen
Transparenter Titel – Bsp. mit verschiedenen Inhalten
Video innerhalb einer anderen Box
Aenean tempus purus non lacus blandit placerat. Sed a semper sapien. Quisque congue turpis nisl, tempus viverra nisl hendrerit eu. Praesent suscipit elit lacus, in porta felis imperdiet sed. Curabitur in imperdiet nisl. In sit amet aliquet sapien, at accumsan nulla. Fusce condimentum eu erat sit amet pharetra. Aliquam orci velit, tempus a sem et, hendrerit egestas lacus. Phasellus pellentesque magna non lorem pharetra aliquet. Nunc id sodales risus.
Box mit h2-Überschrift als Titel
H2 Überschrift
Nulla facilisi. Sed sit amet ex vulputate, lobortis tellus ac, imperdiet orci. Sed luctus tempus velit, in maximus tellus aliquam quis. Suspendisse est orci, maximus in turpis vitae, fermentum laoreet felis. Nam dignissim sapien lorem, eget fringilla turpis interdum vel. Ut urna dolor, viverra sit amet tortor eu, varius porttitor urna. Donec eleifend sollicitudin lorem fringilla pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque odio turpis, vehicula sit amet erat varius, egestas scelerisque nibh. Curabitur faucibus vulputate rutrum.
Fusce ante urna, molestie non metus a, rutrum hendrerit magna. Nam tempus, sapien a ornare bibendum, leo magna convallis libero, id gravida risus purus non lacus. Mauris massa ligula, varius vel ipsum eu, faucibus pellentesque lorem. Nam eu eros sit amet tortor lobortis auctor. Integer eget euismod eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque laoreet at ligula quis euismod. Nam imperdiet ultricies mollis. In luctus efficitur velit, vitae tincidunt tortor ultricies eu. Vestibulum pretium et dui ac dictum. Curabitur porttitor justo augue, sit amet porttitor enim iaculis eu. Suspendisse ac blandit tortor.
Bei der Verwendung von mehreren Boxen auf einer einzelnen Seite, müssen die Bezeichnungen der Boxen im Quelltext jeweils an drei Stellen angepasst werden:
- Einmal im a-Befehl der Teil href="#GibMirEinenEinzigartigenNamen" (# nicht vergessen) und im Teil aria-controls="GibMirEinenEinzigartigenNamen" (das ist für die Barrierefreiheit wichtig, hier kein #).
- Letztlich dann die ID der eigentlichen Box id="GibMirEinenEinzigartigenNamen" (hier auch kein #).
Nur wenn jede Box einen einzigartigen Namen hat, der an den drei genannten Stellen angepasst wurde, wird es funktionieren. Ansonsten weiß der Browser nicht welche Box mit welchem Knopf geöffnet werden soll.