Exklusives Akkordeon mit details und name-Attribut

aufklappbar - Wie funktioniert das?

Das details-Element ermöglicht es, nur mit HTML einen Klappmechanismus in deine Seiten einzubauen.

Umschließe einen HTML-Block mit einem details-Element.

Bei einem Klick auf das details-Element öffnet sich der Block.

Sind eigene Titel-Texte möglich?

Mit dem summary-Element kannst du eigene Texte verwenden.

Daneben gibt es noch einen eingebauten marker, den man mit CSS stylen kann.

Exklusives Akkordeon

Wenn man mehrere details-Elemente über ein gemeinsames name-Attribut verbindet, werden beim Öffnen eines details-Elements bereits geöffnete details-Elemente ohne weiteres Zutun geschlossen.

Dies funktioniert in allen modernen Browsern!

Interaktivität als Standardverhalten von nativen HTML-Elementen! - ganz ohne JavaScript!

Ältere Browser ignorieren das name-Attribut – dann können mehrere details-Elemente gleichzeitig offenstehen." - graceful degradation,
bzw. progressive enhancement für Browser, die dies bereits unterstützen.