Wie wir helfen
Inhalte mit HTML anzeigen und verstecken
Klappboxen mit details
Das details-Element ermöglicht es, Seiteninhalte zu verstecken und mit einem Klick auf summary aufzuklappen.
Dieses Verhalten wird oft als „Akkordeon“ bezeichnet, vor allem wenn mehrere solcher aufklappbaren Elemente vorhanden sind.
Früher konnte ein solches Akkordeon nur mit vielen Zeilen JavaScript verwirklicht werden. Dabei wurde jedoch oft auf eine Bedienbarkeit mit der Tastatur keine Rücksicht genommen. Das details-Element bietet nun eine zugängliche und einfache Alternative.
Popup-Box mit dialog
Eine Dialog-Box ist ein neues Fenster, das sich über die Webseite legt, um eine Frage zu stellen, eine Eingabe abzufragen oder mehrere Optionen anzubieten. Während die Dialog-Box aktiv ist, ist die darunter liegende Webseite nicht aktiv und kann erst wiederverwendet werden, wenn die Dialog-Box geschlossen ist.
In HTML5 wurde dafür das dialog-Element eingeführt, das seit März 2022 von allen Browsern unterstützt wird. Für ältere Versionen kann ein polyfill eingebunden werden.
Wollen Sie mehr lesen? Dann klicken Sie auf die Boxen!
Die Dialog-Box ist ursprünglich nicht sichtbar. Erst mit einem Klick auf den Button wird sie per JavaScript geöffnet.
Mit einem Klick auf Abbrechen können Sie das Popup wieder schließen.