Akkordeon mit einem Schuss Animation

Beim Klicken auf das summary-Element erhält das dazugehörende details-Element ein open-Attribut und gibt den Inhalt frei:

aufklappbar – Wie funktioniert das?

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

Umschließen Sie einen HTML-Block mit einem details-Element und stecken Sie den Teaser in ein summary-Element.

Bei einem Klick auf das summary-Element öffnet sich der Block, während im geschlossenen Zustand nur das summary-Element sichtbar ist.

Sind eigene Texte möglich?

mit dem summary-Element können Sie eigenen Texte verwenden.

Daneben gibt es noch einen eingebauten marker, den Sie mit CSS stylen können.

details und JavaScript

Das details-Element ist in allen modernen Browsern verfügbar und funktioniert ohne JavaScript.

Das Öffnen selbst kann leider nicht mit CSS animiert werden.

Deshalb erhält die Höhe des div-Containers mit JavaScript einen weichen Übergang.

JavaScript ermöglich es auch, bereits geöffnete details-Elemente bei einem klick auf ein anderes Element zu schließen.