【jQuery】アコーディオン実装サンプル10選

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。
サイト制作でよく使うものをまとめました。

きのこさん
いろいろありますねー
きのこさん
いろいろあるのでまとめましたー

アコーディオン、シンプル版

See the Pen アコーディオン、シンプル版 by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_one">
  <div class="accordion_header">アコーディオン、シンプル版
    <div class="i_box"><i class="one_i"></i></div>
  </div>
  <div class="accordion_inner">
    <div class="box_one">
      <p class="txt_a_ac">アコーディオンの中身です。</p>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_01 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
  });
});
サンプルページはこちら

アコーディオン、一つ開けると他は閉じる

See the Pen アコーディオン、一つ開けると他は閉じる by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_one">
  <div class="accordion_header">アコーディオン、一つ開けると他は閉じる
    <div class="i_box"><i class="one_i"></i></div>
  </div>
  <div class="accordion_inner">
    <div class="box_one">
      <p class="txt_a_ac">アコーディオンの中身です。</p>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_02 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
    //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
    $('.s_02 .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
    $('.s_02 .accordion_one .accordion_header').not($(this)).removeClass("open");
  });
});
サンプルページはこちら

アコーディオン、一番目は開けておく

See the Pen アコーディオン、一番目は開けておく by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_one">
  <div class="accordion_header stay">アコーディオン、一番目は開けておく
    <div class="i_box"><i class="one_i"></i></div>
  </div>
  <div class="accordion_inner stay">
    <div class="box_one">
      <p class="txt_a_ac">アコーディオンの中身です。</p>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_03 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
  });
});
サンプルページはこちら

アコーディオン、一番目は開けておく（一つ開けると他は閉じる）

See the Pen アコーディオン、一番目は開けておく（一つ開けると他は閉じる） by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_one">
  <div class="accordion_header stay">アコーディオン、一番目は開けておく
    <div class="i_box"><i class="one_i"></i></div>
  </div>
  <div class="accordion_inner stay">
    <div class="box_one">
      <p class="txt_a_ac">アコーディオンの中身です。一つ開けると他は閉じます。</p>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_04 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
    //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
    $('.s_04 .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
    $('.s_04 .accordion_one .accordion_header').not($(this)).removeClass("open");
    $('.s_04 .accordion_one .accordion_header.stay').not($(this)).toggleClass("open");
  });
});
サンプルページはこちら

アコーディオンの閉じるボタンを複数作る

See the Pen アコーディオンの閉じるボタンを複数作る by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_one">
  <div class="accordion_header" id="ac1">アコーディオンの閉じるボタンを複数作る
    <div class="i_box"><i class="one_i"></i></div>
  </div>
  <div class="accordion_inner">
    <div class="box_one">
      <p class="txt_a_ac">ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。</p>
    </div>
    <div class="closeArea">
      <div class="close_box"><a href="#ac1" class="close_btn">閉じる<div class="i_box"><i class="one_i"></i></div></a></div>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_05 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
  });
  //閉じるボタンがクリックされたら
  $('a.close_btn').click(function () {
    //クリックされたa.close_btnの親要素.accordion_innerを閉じる。
    $(this).parents('.accordion_inner').slideUp();
    //クリックされたa.close_btnの親要素.accordion_innerの前要素にクラスopenがなければ追加し、あれば削除する。
    $(this).parents('.accordion_inner').prev().toggleClass("open");
  });
});
 
// ページ内リンク
$(function(){
  // 閉じるボタンをクリックした場合に処理
  $('.s_05 a.close_btn').click(function() {
    // 移動先を0px上にずらす
    var adjust = 0;
    // スクロールの速度
    var speed = 500; // ミリ秒
    // アンカーの値取得
    var href= $(this).attr("href");
    // 移動先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を調整
    var position = target.offset().top - adjust;
    // スムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});
サンプルページはこちら

アコーディオンの閉じるボタンを複数作る（一つ開けると他は閉じる）

See the Pen アコーディオンの閉じるボタンを複数作る（一つ開けると他は閉じる） by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_one">
  <div class="accordion_header" id="ac1_b">アコーディオンの閉じるボタンを複数作る
    <div class="i_box"><i class="one_i"></i></div>
  </div>
  <div class="accordion_inner">
    <div class="box_one">
      <p class="txt_a_ac">ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。<br><br>一つ開けると他は閉じるバージョンです。</p>
    </div>
    <div class="closeArea">
      <div class="close_box"><a href="#ac1_b" class="close_btn">閉じる<div class="i_box"><i class="one_i"></i></div></a></div>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_06 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
      //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
    $('.s_06 .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
    $('.s_06 .accordion_one .accordion_header').not($(this)).removeClass("open");
  });
  //閉じるボタンがクリックされたら
  $('a.close_btn').click(function () {
    //クリックされたa.close_btnの親要素の.accordion_oneの.accordion_innerを閉じる。
    $(this).parents('.s_06 .accordion_one .accordion_inner').slideUp();
    $('.s_06 .accordion_one .accordion_header').removeClass("open");
  });
});
 
// ページ内リンク
$(function(){
  // 閉じるボタンをクリックした場合に処理
  $('.s_06 a.close_btn').click(function() {
    // 移動先を0px上にずらす
    var adjust = 0;
    // スクロールの速度
    var speed = 500; // ミリ秒
    // アンカーの値取得
    var href= $(this).attr("href");
    // 移動先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を調整
    var position = target.offset().top - adjust;
    // スムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});
サンプルページはこちら

アコーディオンで多階層のメニューを作る

See the Pen アコーディオンで多階層のメニューを作る by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_one">
  <div class="accordion_header">アコーディオンで多階層のメニューを作る
    <div class="i_box"><i class="one_i"></i></div>
  </div>
  <div class="accordion_inner">
    <div class="accordion_one">
      <div class="accordion_header">A
        <div class="i_box"><i class="one_i"></i></div>
      </div>
      <div class="accordion_inner">
        <div class="accordion_one">
          <div class="accordion_header">A_a</div>
          <div class="accordion_header">A_b</div>
        </div>
      </div>
    </div>
    <div class="accordion_one">
      <div class="accordion_header">B
        <div class="i_box"><i class="one_i"></i></div>
      </div>
      <div class="accordion_inner">
        <div class="accordion_one">
          <div class="accordion_header">B_a</div>
          <div class="accordion_header">B_b</div>
        </div>
      </div>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_07 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
  });
});
サンプルページはこちら

アコーディオンのメニュー、横に並べる（一つ開けると他は閉じる）

See the Pen アコーディオンのメニュー、横に並べる（一つ開けると他は閉じる） by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_area">
  <div class="accordion_one _flex">
    <div class="accordion_header">A
      <div class="i_box"><i class="one_i"></i></div>
    </div>
    <div class="accordion_inner">
      <div class="accordion_one">
        <div class="accordion_header_one">A_a</div>
        <div class="accordion_header_one">A_b</div>
      </div>
    </div>
  </div>
  <div class="accordion_one _flex">
    <div class="accordion_header">B
      <div class="i_box"><i class="one_i"></i></div>
    </div>
    <div class="accordion_inner">
      <div class="accordion_one">
        <div class="accordion_header_one">B_a</div>
        <div class="accordion_header_one">B_b</div>
      </div>
    </div>
  </div>
  <div class="accordion_one _flex">
    <div class="accordion_header">C
      <div class="i_box"><i class="one_i"></i></div>
    </div>
    <div class="accordion_inner">
      <div class="accordion_one">
        <div class="accordion_header_one">C_a</div>
        <div class="accordion_header_one">C_b</div>
      </div>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_08 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
    //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
    $('.s_08 .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
    $('.s_08 .accordion_one .accordion_header').not($(this)).removeClass("open");
  });
});
サンプルページはこちら

アコーディオン、横に開く（一つ開けると他は閉じる）

See the Pen アコーディオン、横に開く（一つ開けると他は閉じる） by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <div class="accordion_header">
      <div class="header_inner">A
        <div class="i_box"><i class="one_i"></i></div>
      </div>
    </div>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Aのテキストです。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <div class="accordion_header">
      <div class="header_inner">B
        <div class="i_box"><i class="one_i"></i></div>
      </div>
    </div>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Bのテキストです。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <div class="accordion_header">
      <div class="header_inner">C
        <div class="i_box"><i class="one_i"></i></div>
      </div>
    </div>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Cのテキストです。</p>
      </div>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_09 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerの横幅を開いたり閉じたりする。
    $(this).next().animate({width:'toggle'});
    $(this).toggleClass("open");
    //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
    $('.s_09 .accordion_one .accordion_header').not($(this)).next().animate({width:'hide'});
    $('.s_09 .accordion_one .accordion_header').not($(this)).removeClass("open");
  });
});
サンプルページはこちら

アコーディオン、横に開く（一番目は開けておく、一つ開けると他は閉じる）

See the Pen アコーディオン、横に開く（一番目は開けておく、一つ開けると他は閉じる） by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <div class="accordion_header stay">
      <div class="header_inner">A
        <div class="i_box"><i class="one_i"></i></div>
      </div>
    </div>
    <div class="accordion_inner stay">
      <div class="box_one">
        <p class="txt_a_ac">Aのテキストです。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <div class="accordion_header">
      <div class="header_inner">B
        <div class="i_box"><i class="one_i"></i></div>
      </div>
    </div>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Bのテキストです。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <div class="accordion_header">
      <div class="header_inner">C
        <div class="i_box"><i class="one_i"></i></div>
      </div>
    </div>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Cのテキストです。</p>
      </div>
    </div>
  </div>
</div>
サンプルページはこちら

JavaScript

▽jquery.min.js（3.6.0）使用

$(function(){
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.s_10 .accordion_one .accordion_header').click(function(){
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerの横幅を開いたり閉じたりする。
    $(this).next().animate({width:'toggle'});
    $(this).toggleClass("open");
    //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
    $('.s_10 .accordion_one .accordion_header').not($(this)).next().animate({width:'hide'});
    $('.s_10 .accordion_one .accordion_header').not($(this)).removeClass("open");
    $('.s_10 .accordion_one .accordion_header.stay').not($(this)).toggleClass("open");
  });
});
サンプルページはこちら

メモ

jQueryを使えばアコーディオンを使っていろいろと応用ができるのでおすすめです。

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

jQuery日本語リファレンス
jQuery（英語版）

さいごに

きのこさん
コッペパンが好きです
きのこさん
クリームパンが好きです
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2024.2.2

5

/

8

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインのこと - Web design gallery
いつかのこと

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】アコーディオン実装サンプル10選
【jQuery】アコーディオン実装サンプル10選
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集

5

/

8

2025

SPONSORED LINK

おすすめの広告です

広告

google

関連記事

4

/

3

2024

【jQuery】指定した場所までスクロールすると下からふわっと出てくる

あのー、下からふわっと出したいのですが、場所指定ってできますかー？ 場所指定、できますよー 【サンプル】指定した場所までスクロールすると下からふわっと出てくる まずはスクロールですねー See the Pen 【jQue

...
【jQuery】指定した場所までスクロールすると下からふわっと出てくる

デザインのメモ

5

/

28

2024

【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策

あ、iPhoneで見るとちょっとズレてますー そんな時はブラウザの高さを自動で取得しちゃえばOKですよー 画像を画面いっぱいに表示する（ブラウザサイズを自動で取得してiOS対策） See the Pen 【jQuery】

...
【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策

デザインのメモ

5

/

15

2024

【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集

横並びの要素の高さを揃えてくれるプラグイン『matchHeight.js』の使い方と、制作に役立つ実装サンプルをまとめました。「flexboxの中にあるこの部分の高さを揃えたいのだけど！」って言う時にはとってもおすすめで

...
【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集

デザインのメモ

Googleさんの
おすすめ

5

/

8

2025

SPONSORED LINK

おすすめの広告です

広告

google

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

デザインのメモ

2024.7.11

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...
【jQuery】スライダープラグイン「slick」実装サンプル集

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ

...
【jQuery】アコーディオン実装サンプル10選

デザインのメモ

もっと見る

Googleさんの
おすすめ

5

/

8

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインの記事

イラストレーター ナカノエミ
ソラニン
  • 2025.05.03New
  • ソラニン
  • 控えめに言って最高じゃないかと思う。きっと10年前も同じこと思ったんだろうなと思う…
  • いつかのこと
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能）