Akkordeon (aufklappen/zuklappen)

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 2 von 27.

Ein Akkordeon ist eine UI-Komponente, mit der Sie Inhaltsabschnitte aus- und einklappen können. Es wird oft für FAQs verwendet (auf eine Frage klicken → die Antwort anzeigen, erneut klicken → sie ausblenden).
Die Idee ist einfach: Wenn Sie auf eine Kopfzeile klicken, schaltet JavaScript die Sichtbarkeit des darunter liegenden Inhalts um.

Wichtige Punkte:

Wir haben einen Button und ein Inhaltselement, das standardmäßig ausgeblendet ist (display: none).

Das Klicken auf die Schaltfläche löst die Funktion aus und übergibt die ID des Elements, das geöffnet werden soll.

Innerhalb der Funktion:
- Wenn das Element bereits angezeigt wird (display: block), verbergen wir es (display: none).
- Andernfalls zeigen wir es an (display: block).

<button onclick="toggle('p1')">Frage 1</button>
<div id="p1" style="display:none;">Antwort 1</div>

<script>
  function toggle(id) {
    const element = document.getElementById(id);
    if (element.style.display === "block") {
      element.style.display = "none";
    } else {
      element.style.display = "block";
    }
  }
</script>

Aufgabe

Einfach

Im Moment hat unser Akkordeon drei Fragen. Deine Aufgabe ist es, eine vierte hinzuzufügen.

Schritte:

Erstelle einen neuen <button> mit dem Text: Should I add milk or drink it black?
Verknüpfe ihn mit einem neuen Panel, indem du die Funktion onclick="togglePanel('q4')" aufrufst.
Erstelle ein <div> mit der id="q4" und der Klasse panel.
Schreibe die Antwort in das div:
It depends on your taste! Black coffee has stronger flavor, while milk softens the bitterness.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>FAQ Accordion</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>FAQ Coffee Lovers</h1>

  <button class="accordion" onclick="togglePanel('q1')">What is the best way to brew coffee at home?</button>
  <div id="q1" class="panel">
    The French press and pour-over methods are popular for making rich, flavorful coffee at home.
  </div>

  <button class="accordion" onclick="togglePanel('q2')">Where do coffee beans come from?</button>
  <div id="q2" class="panel">
    Most coffee beans are grown in countries around the equator, such as Brazil, Ethiopia, and Colombia.
  </div>

  <button class="accordion" onclick="togglePanel('q3')">How late can I drink coffee?</button>
  <div id="q3" class="panel">
    It's best to avoid coffee 6 hours before bedtime, since caffeine can affect your sleep.
  </div>


  <script src="script.js"></script>
</body>
</html>