アコーディオン (開閉)

CoddyのHTMLジャーニー「JavaScript in Action」セクションの一部 — レッスン 2/27。

アコーディオンは、コンテンツのセクションを展開したり折りたたんだりできるUIコンポーネントです。よくFAQ（質問をクリックすると回答が表示され、もう一度クリックすると非表示になる）に使用されます。
仕組みはシンプルです。ヘッダーをクリックすると、JavaScriptがその下のコンテンツの表示・非表示を切り替えます。

重要なポイント:

ボタンと、デフォルトで非表示（display: none）になっているコンテンツ要素があります。

ボタンをクリックすると関数が実行され、開くべき要素のIDが渡されます。

関数内では:
- 要素が既に表示されている場合 (display: block)、それを非表示にします (display: none)。
- そうでない場合は、それを表示します (display: block)。

<button onclick="toggle('p1')">Question 1</button>
<div id="p1" style="display:none;">Answer 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>

チャレンジ

簡単

現在、アコーディオンには3つの質問があります。あなたのタスクは、4つ目の質問を追加することです。

ステップ：

次のテキストを持つ新しい <button> を作成します：Should I add milk or drink it black?
関数 onclick="togglePanel('q4')" を呼び出して、新しいパネルにリンクさせます。
id="q4" とクラス panel を持つ <div> を作成します。
divの中に、次の回答を記述します：
It depends on your taste! Black coffee has stronger flavor, while milk softens the bitterness.

自分で試してみよう

<!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>