Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Solution: Akkordeon

Solution: Akkordeon – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Gratismonat starten Für Ihr Team erwerben

Solution: Akkordeon

“

(Musik) Ich möchte Ihnen jetzt eine mögliche Lösung, eine Solution für die Challenge mit dem Akkordeon, mit den ausklappbaren Inhalten zeigen. Und zunächst einmal bestand die erste Aufgabe darin, mit den Elementen <details> und <summary> ausklappbare Inhalte zu erstellen. Sie sehen, <details> ist das umgebende Element, <summary> ist der sichtbare Text hier. Und dann kann man das rausklappen und da drin können beliebige Inhalte erscheinen. In diesem Falle ist das nur ein Absatz. Das Gleiche wird wiederholt. <details> ist das umgebende Element, <summary> ist der sichtbare Text und der Text, der nach dem Öffnen sichtbar wird, der steht dann unten, drunter hier unter der <summary>. Soweit zum HTML, kommen wir jetzt zum Gestalten. <details> ist das umgebende Element, damit geht's los. Ich habe hier schon mal was vorbereitet und entferne den Kommentar eben. Sie sehen, das sind ganz normale Boxmodell-Eigenschaften: Hintergrund, Border, eine Rahmenlinie drumherum, ein bisschen Padding, damit…

Inhalt