モダンJavaScript入門: インタラクティブなアコーディオンメニュー

1. はじめに

この記事では、モダンなJavaScriptを利用してインタラクティブなアコーディオンメニューを作成する方法を紹介します。HTMLとCSSを使って基本的な構造とデザインを作り、JavaScriptを使ってそれを動的にします。

2. アコーディオンメニューとは

アコーディオンメニューは、コンテンツを省スペースで表示できる便利なUI要素です。一つのセクションをクリックするとその内容が展開し、他のセクションは自動的に閉じます。

3. HTML構造

まず、以下のようなHTML構造を作ります。

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
      </div>
    </div>
  </div>
  <!-- Repeat for other accordion items -->
</div>

4. CSSデザイン

次に、アコーディオンメニューにスタイルを適用します。以下に一部を示します。

.accordion-button {
  /* Customize the button's style here */
  background: #f7f7f7;
  color: #002;
  margin: 1em 0;
  padding: 0.5em;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background 0.5s;
}

.accordion-button:hover {
  background: #ddd;
}

.accordion-button::after {
  content: '\002B';
  float: right;
}

.accordion-button.collapsed::after {
  content: '\2212';
}

.accordion-body {
  /* Customize the accordion body's style here */
  padding: 1em;
  background: #ddd;
  margin: 0 0 1em;
}

5. JavaScriptでインタラクティブに

最後に、JavaScriptを使ってアコーディオンメニューをインタラクティブにします。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

6. 実際のコード例

ここまでで作成したコードを組み合わせると、以下のような完全なコード例になります。

<!-- HTML -->
<div class="accordion">
  <button class="accordion-button">セクション1</button>
  <div class="accordion-body">ここに内容を書きます。</div>
  <!-- 他のセクションも同様に -->
</div>

<!-- CSS -->
<style>
.accordion-button {
  /* ボタンのスタイル */
}

.accordion-body {
  display: none;
  padding: 1em;
}
</style>

<!-- JavaScript -->
<script>
var acc = document.getElementsByClassName("accordion-button");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var body = this.nextElementSibling;
    if (body.style.display === "block") {
      body.style.display = "none";
    } else {
      body.style.display = "block";
    }
  });
}
</script>

7. CODEPENでの実行

上記のコードを組み合わせてCODEPENで実行すると、インタラクティブなアコーディオンメニューが完成します。詳細はこちらをご覧ください。

8. まとめ

この記事では、モダンなJavaScriptを使ってインタラクティブなアコーディオンメニューを作成する方法を学びました。このようなインタラクティブなUI要素は、ユーザーにとって使いやすいサイトを作る上で非常に重要です。

AIko Code Symphony