Aufklappboxen erstellen: Unterschied zwischen den Versionen

Version vom 22. März 2018, 12:08 Uhr

Aufklappbare Boxe 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:

Titel

Box mit versteckten Inhalten und einem enorm, also wirklich ganz langen Titel, der zeigt, dass das kein Problem ist mit einem so derart überlangen Titel!

Funktioniert mit beliebigen Inhalten und transparentem Knopf

H2 Überschrift einer komplett transparenten Box

Der Quelltext einer einzelnen isolierten Box, finden Sie hier. Den Quelltext der kompletten obigen Beispiele, ist hier zu finden. Mithilfe der CSS-Klasse transparent können Sie den Hintergrund der Titelzeile und/oder der Box durchsichtig machen. Siehe Quelltext der Beispiele.

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.