Accordion

ACCORDION

Accordeons sind Komponenten, die Abschnitte von Informationen zeigen oder verstecken können.

Accordeon 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore repudiandae unde numquam perspiciatis magni modi eveniet, harum aut cupiditate voluptate veniam libero? Obcaecati omnis sequi voluptatibus saepe odio necessitatibus quibusdam culpa, reprehenderit velit totam. Autem adipisci aut tempore alias soluta quisquam maiores, eaque totam? Saepe dicta illo commodi consequuntur praesentium.

Accordeon 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et corporis ad fugiat, culpa, est quaerat numquam id harum ab quod, ipsam quia aliquid nihil corrupti!

Accordeon 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et corporis ad fugiat, culpa, est quaerat numquam id harum ab quod, ipsam quia aliquid nihil corrupti!

Was ist zu tun?

Ein Accordeon besteht aus zwei Komponenten: einem Accordeon-Header und einem Accordeon-Inhaltsbereich.

  1. Was muss logisch passieren?
  2. Welches HTML brauche ich?
  3. Welches CSS brauche ich?
  4. Wie schreibe ich das JS, Schritt für Schritt, damit die Komponente funktioniert?

Welches HTML brauche ich?

  • einen Container für jedes Accordeon
  • einen Accordeon-Header, auf den man zum öffnen bzw. schließen klickt (also einen Button)
  • einen Accordeon-Content
  • ein Icon, das den Zustand (offen oder geschlossen) anzeig

Was muss logisch passieren?

Der Inhalt eines Accordeons muss sich mit einem Klick/Tastatur-Enter auf den Accordeon-Header öffnen und schließen.

CSS

  • Accordeon-Inhalt mit display: none; ausblenden.
  • Accordeon-Inhalt wird sichtbar, wenn das Accordeon die Klasse .is-open erhält.
  • Plus-Indikator ist standardmäßig sichtbar, Minus-Indikator ist versteckt
  • Plus-Indikator wird versteckt, wenn das Accordeon die Klasse .is-open erhält, der Minus-Indikator wird angezeigt.

JavaScript

Ein Klick auf den Accordeon-Header toggelt die Klasse .is-open im Accordeon:

  • Accordeon-Array definieren
  • forEach-Loop über den Array laufen lassen
  • in der Loop den jeweiligen Accordeon-Header definieren
  • Klick-Event für den Accordeon Header setzt die Klasse .is-open auf das Accordeon

Animating the accordion - Box model

Padding und Border wird zusammengezählt. Wenn die Höhe größer ist als die Summe von Padding und Border, wird die Differenz dem Content zugewiesen. Wenn die Höhe kleiner ist, bleibt der Content 0 Pixel hoch und die Box besteht weiterhin nur aus Padding und Border.