LU04b – FAQ Accordion

Dies ist eine alte Version des Dokuments!

Laden Sie hier das Figma-File, die Start-HTML und das Readme herunter:

<div class="accordion">
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 1
    </button>
    <div class="panel">
      Antwort 1...
    </div>
  </div>
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 2
    </button>
    <div class="panel">
      Antwort 2...
    </div>
  </div>
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 3
    </button>
    <div class="panel">
      Antwort 3...
    </div>
  </div>
 
</div>

const buttons = document.querySelectorAll('.accordion-btn');
 
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const panel = btn.nextElementSibling;
    const istOffen = panel.classList.contains('open');
 
    // Alle Panels schliessen
    buttons.forEach(andererBtn => {
 
    });
 
    // Dieses Panel öffnen (nur wenn es vorher zu war)
    if (!istOffen) {
 
    }
  });
});

Bauen Sie Ihr eigenes FAQ Accordion. Ziel für heute: HTML-Struktur, CSS und ein funktionierender Click-Handler.

Schritt 1 – Neues Projekt anlegen

Erstellen Sie den Ordner faq-accordion/ mit folgenden Dateien:

index.html
style.css
script.js

Verlinken Sie CSS und JS in Ihrer HTML-Datei (<link> und <script src=„…“>).

Schritt 2 – HTML-Struktur bauen

Erstellen Sie mindestens 3 FAQ-Items mit der Struktur aus dem Abschnitt oben. Denken Sie an aria-expanded=„false“ an jedem Button.

Schritt 3 – CSS stylen

Panel standardmässig mit display: none ausblenden
Klasse .open mit display: block definieren
Button gestalten: width: 100%, padding, border: none, cursor: pointer

Schritt 4 – JavaScript: Click-Handler

Alle Buttons mit querySelectorAll holen
forEach über alle Buttons
addEventListener('click', …) auf jeden Button
Panel mit classList.toggle('open') ein-/ausblenden

Schritt 5 – aria-expanded setzen

Beim Klick den korrekten Wert von aria-expanded mit setAttribute setzen. Tipp: Aktuellen Wert zuerst lesen (getAttribute), dann den umgekehrten setzen.

Kein AI-generierter Code! Schreiben Sie Ihren Code selbst. Sie können diese Seite als Referenz nutzen und Teile übernehmen – aber tippen Sie selbst und verstehen Sie, was Sie schreiben. Das Ziel ist, dass Sie das Muster verinnerlichen.

LU04b – FAQ Accordion

FAQ Accordion Starter Kit

Das FAQ Accordion bauen – Referenz-Code

HTML-Struktur

JavaScript

Ihre Aufgabe

BZZ - Modulwiki