Nur mit CSS: Akkordeons mit animiertem Plus-Minus-Symbolen

Funktionsweise

Neben den entsprechenden Akkordion-Buttons befindet sich eine versteckte Checkbox.
Mithilfe des General sibling selectors (Allgemeiner Geschwister-Selektor) kann der Akkordion-Inhalt entsprechend dem Status der Checkbox verändert werden.

Also zum Beispiel:

<div>
  <input type=checkbox >
  <div class="accordion-content"></div>
</div>
.accordion-content {
  display:none;
}
input:checked ~ .accordion-content {
  display:block;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*