jQueryで作るアコーディオン｜detailsタグ・バニラJSの作り方も【コピペOK・2026年版】

jQueryで作るシンプルで簡単なアコーディオンを紹介します。

開閉式のメニューなど、何かと使用する機会も多いです。

この記事では、jQueryを使った定番の作り方に加えて、jQueryを使わないモダンな方法（HTML＋CSSだけ／素のJavaScript）もあわせて紹介します。コピペで使えるので、環境に合わせて選んでください。

シンプル版
連続クリック対策
1. JS
2. サンプル
jQueryを使わない作り方【2026年版】
まとめ｜どの方法を選ぶ？

シンプル版

JS

$(function(){
  $('.accordion').click(function(){
    $(this).next().slideToggle();
  });
});

たったこれだけです。
slideToggleメソッドを利用して、.accordionクラスをクリックした際に、隣接する次の要素が開閉する仕組みとなっています。

html

<dl>
  <dt class="accordion">アコーディオンタイトル</dt>
  <dd class="accordion-contents">アコーディオン内コンテンツ</dd>
</dl>

ここでは<dl>タグを使用しましたが、.accordionクラスを見出しのhタグに付与して、.accordion-contentsをpタグに付与等の使い方でもよさそうです。

CSS

.accordion {
  padding: 10px;
  background: #f7ecf1;
  font-weight: bold;
}

.accordion-contents {
  padding: 10px;
  display: none;
}

アコーディオン内のコンテンツ部分は、最初は閉じた状態にしておきたいので、display: none;を指定しています。
他の部分は見た目の調整なので、自由にカスタマイズしてみてください。

サンプル

アコーディオンタイトルクリックで開閉: アコーディオン内コンテンツ

連続クリック対策

上のシンプル版でも十分に実用できますが、アコーディオンの開閉中に連続でクリック(タップ)した場合、クリックした回数分きっちりと開閉してしまいます。
実際はそこまで高速かつ連続でクリックするユーザーはいないとは思いますが、高速かつ連続でクリックされた場合、アコーディオンの開閉アニメーションが連続で何回も繰り返されてしますので、念の為対策しておいてもよいでしょう。

JS

$(function(){
  $('.accordion').click(function(){
    $(this).next().stop().slideToggle();
  });
});

slideToggleメソッドの前にstopメソッドを入れることで、現在動作中のアニメーション処理が全て中止されます。
これにより、連続でクリックされた際にアコーディオンの開閉アニメーションが連続で何回も繰り返されるのを防ぐことができます。

サンプル

アコーディオンタイトルクリックで開閉: アコーディオン内コンテンツ

jQueryを使わない作り方【2026年版】

ここまではjQueryを使った定番の方法を紹介しましたが、近年はjQueryに頼らず実装するケースも増えています。jQueryなしの2パターンも見ておきましょう。

HTML＋CSSだけで作る（detailsタグ）

もっとも手軽なのが、HTML標準の<details>・<summary>タグを使う方法です。JavaScriptが一切不要で、クリックでの開閉に加えて、キーボード操作やスクリーンリーダー対応（アクセシビリティ）も最初から備わっているのが大きな利点です。

<details class="accordion-d">
  <summary>アコーディオンタイトル</summary>
  <div class="accordion-d-contents">アコーディオン内コンテンツ</div>
</details>

.accordion-d > summary {
  padding: 10px;
  background: #f7ecf1;
  font-weight: bold;
  cursor: pointer;
}
.accordion-d-contents {
  padding: 10px;
}

これだけで動きます。開閉アニメーションは付きませんが、シンプルで軽量、アクセシビリティ的にも理想的なので、凝った演出が不要ならこれが一番おすすめです。

サンプル

アコーディオンタイトルクリックで開閉

アコーディオン内コンテンツ（detailsタグなのでJavaScript不要で開閉します）

素のJavaScript（バニラJS）で作る

jQueryを読み込みたくないけれど、クラスの付け外しを自分で制御したい場合は、素のJavaScriptでも簡単に書けます。

document.querySelectorAll('.accordion').forEach(function(el){
  el.addEventListener('click', function(){
    this.nextElementSibling.classList.toggle('is-open');
  });
});

.accordion-contents {
  display: none;
}
.accordion-contents.is-open {
  display: block;
}

クラスを付け外しして表示・非表示を切り替えるだけのシンプルな実装です。jQueryのslideToggle()のようなスライドアニメーションを付けたい場合は、max-heightとtransitionを組み合わせる方法がよく使われます。

まとめ｜どの方法を選ぶ？

3つの方法を紹介しました。用途に合わせて選んでください。

アニメーション不要で手軽に・アクセシビリティ重視 → detailsタグ（HTML＋CSSのみ、JS不要）
すでにjQueryを使っているサイト → jQuery版（slideToggle＋stopでスライド開閉が手軽）
jQueryなしで細かく制御したい → バニラJS版

タイトル部分に画像を使用したり、複数並べてアコーディオンメニューにしたりと、応用も自在です。アコーディオンはWeb制作の現場でもよく使うテクニックなので、覚えておくと幅が広がります。