jqueryアコーディオン 複数

jQueryで複数のアコーディオンを簡単に実装する方法【初心者向け】

jQueryで複数のアコーディオンを簡単に実装する方法【初心者向け】

この記事では、jQueryを使って、Webサイトに複数の開閉可能なアコーディオンセクションを簡単に実装する方法を、初心者にも分かりやすく解説します。サンプルコード付きで、コピー＆ペーストですぐに利用できます。

複数のアコーディオンとは？

アコーディオンとは、Webサイト上でコンテンツを折りたたんで表示するUI要素です。クリックすると展開し、もう一度クリックすると折りたたむことができます。複数のアコーディオンは、複数のコンテンツブロックを個別に開閉できるようにしたものです。FAQページや商品説明など、多くの情報を整理して表示するのに役立ちます。

jQueryを使って複数のアコーディオンを実装する方法

以下の手順に従って、jQueryを使って複数のアコーディオンを実装します。

1. HTMLの構造

まず、アコーディオンを表示するためのHTML構造を作成します。


<dl class="accordion">
  <dt>アコーディオンのタイトル1</dt>
  <dd>アコーディオンの内容1</dd>

  <dt>アコーディオンのタイトル2</dt>
  <dd>アコーディオンの内容2</dd>

  <dt>アコーディオンのタイトル3</dt>
  <dd>アコーディオンの内容3</dd>
</dl>
  • <dl>, <dt>, <dd>タグを使ってアコーディオンの構造を表現します。
  • <dt>はアコーディオンのタイトル、<dd>はアコーディオンの内容になります。

2. CSSでスタイルを設定

次に、CSSを使ってアコーディオンのスタイルを設定します。


<style>
.accordion dt {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
}

.accordion dd {
  display: none;
  padding: 10px;
}

.accordion dd.active {
  display: block;
}
</style>
  • 最初はアコーディオンの内容を非表示にするため、.accordion dd に display: none; を設定します。
  • クリックされたアコーディオンの内容を表示するため、.accordion dd.active に display: block; を設定します。

3. jQueryで開閉動作を実装

最後に、jQueryを使ってアコーディオンの開閉動作を実装します。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
  // アコーディオンをクリックした時の処理
  $('.accordion dt').click(function() {
    // クリックされたアコーディオンの内容を開閉
    $(this).next('dd').slideToggle().toggleClass('active');
    // 他のアコーディオンの内容を閉じる
    $(this).parent().siblings().find('dd').slideUp().removeClass('active');
  });
});
</script>
  • .accordion dt をクリックすると、slideToggle() でアコーディオンの内容をスムーズに開閉します。
  • toggleClass('active') で開閉状態に合わせてクラスを付け外しし、CSSで表示を切り替えます。
  • 他のアコーディオンの内容を閉じるために、siblings().find('dd') を使って対象要素以外のアコーディオンの内容を取得し、slideUp() で閉じます。

まとめ

jQueryを使えば、上記のように簡単なコードで複数のアコーディオンを実装できます。今回のコードを参考に、Webサイトにアコーディオンを実装して、ユーザーにとって見やすく、使いやすいサイト作りに役立てましょう。

関連QA

質問 回答
アコーディオンを開いた状態でページを読み込むことはできますか？ はい、可能です。該当するアコーディオンの <dd> タグに "active" クラスを追加し、CSSで display: block; を指定することで実現できます。
アコーディオンの開閉アニメーションの速度を変更できますか？ はい、可能です。slideToggle() メソッドに引数として速度 (ミリ秒) を渡すことで変更できます。例：slideToggle(500) は0.5秒かけて開閉します。
複数のアコーディオンを同時に開くことはできますか？ 上記コードでは、クリックされたアコーディオン以外を閉じるように設定されています。複数同時に開きたい場合は、該当のコード部分を削除または修正する必要があります。

その他の参考記事:jquery アコーディオン