CSSとjQueryでアコーディオンを実装する

CSSとjQueryを使用した、アコーディオンメニューを実装する方法を解説します。

アコーディオンメニューの作成例

今回作成するアコーディオンメニューです。

See the Pen
アコーディオンメニュー by りん@エンジニア (@rinblog0408)
on CodePen.

アコーディオンの基本構造を作成する

HTMLの準備

まず、アコーディオンを実装するための基本的なHTML構造を作成します。以下は、3つのセクションからなるアコーディオンの例です。各セクションには見出しとコンテンツが含まれます。

<div class="accordion">
  <div class="accordion-section">
    <div class="accordion-header">セクション1の見出し</div>
    <div class="accordion-content">
      セクション1のコンテンツがここに入ります。
    </div>
  </div>
  <div class="accordion-section">
    <div class="accordion-header">セクション2の見出し</div>
    <div class="accordion-content">
      セクション2のコンテンツがここに入ります。
    </div>
  </div>
  <div class="accordion-section">
    <div class="accordion-header">セクション3の見出し</div>
    <div class="accordion-content">
      セクション3のコンテンツがここに入ります。
    </div>
  </div>
</div>

CSSを使ってアコーディオンのスタイリングを行う

CSSの適用

アコーディオンのスタイリングを行います。以下のCSSコードは、基本的なスタイルを設定するもので、デザインに合わせてカスタマイズできます。]

/* アコーディオンセクションのスタイル */
.accordion-section {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

/* アコーディオンヘッダーのスタイル */
.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}

/* アコーディオンコンテンツのスタイル */
.accordion-content {
  display: none;
  padding: 10px;
}

/* アクティブなアコーディオンのスタイル */
.active {
  display: block;
}

jQueryを使ってアコーディオンの動作を追加する

jQueryの導入

jQueryを使用して、アコーディオンを動的に操作します。以下のコードをHTMLファイル内に挿入します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // アコーディオンヘッダーがクリックされたときの動作
    $('.accordion-header').click(function() {
      // クリックされたアコーディオン以外を閉じる
      $('.accordion-content').slideUp();
      $('.accordion-header').removeClass('active');

      // クリックされたアコーディオンを開く
      $(this).toggleClass('active');
      $(this).next('.accordion-content').slideToggle();
    });
  });
</script>

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ