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

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


もくじ
1. アコーディオン、シンプル版
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"); }); });
2. アコーディオン、一つ開けると他は閉じる
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"); }); });
3. アコーディオン、一番目は開けておく
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"); }); });
4. アコーディオン、一番目は開けておく(一つ開けると他は閉じる)
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"); }); });
5. アコーディオンの閉じるボタンを複数作る
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; }); });
6. アコーディオンの閉じるボタンを複数作る(一つ開けると他は閉じる)
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; }); });
7. アコーディオンで多階層のメニューを作る
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"); }); });
8. アコーディオンのメニュー、横に並べる(一つ開けると他は閉じる)
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"); }); });
9. アコーディオン、横に開く(一つ開けると他は閉じる)
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"); }); });
10. アコーディオン、横に開く(一番目は開けておく、一つ開けると他は閉じる)
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の日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。
さいごに


おすすめ
かんれん
- web / 2019.1.17
- 【CSS】プラスとマイナスをつくる
- web / 2019.9.26
- 【CSS】input、textareaのCSSを初期化する(iOS対策)
- web / 2019.5.10
- 【CSS】ローディングアニメーション実装サンプル集
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.10.02New
- Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。