【jQuery】アコーディオン実装サンプル10選
- 2019.7.22
- 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-1.11.3.min.js使用
$(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-1.11.3.min.js使用
$(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-1.11.3.min.js使用
$(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-1.11.3.min.js使用
$(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-1.11.3.min.js使用
$(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"); }); //閉じるボタンがクリックされたら $('.s_05 a.close_btn').click(function () { //クリックされたa.close_btnの親要素の.accordion_oneの.accordion_innerを閉じる。 $(this).parents('.s_05 .accordion_one .accordion_inner').slideUp(); $('.s_05 .accordion_one .accordion_header').removeClass("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-1.11.3.min.js使用
$(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-1.11.3.min.js使用
$(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-1.11.3.min.js使用
$(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-1.11.3.min.js使用
$(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-1.11.3.min.js使用
$(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.12.6
- 【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集
- web / 2019.8.30
- 【jQuery】slick を使ってスライドショー(横幅いっぱい+前後のスライドを半透明にする)
- web / 2018.12.22
- 【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2019.7.22
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2019.7.24
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
- web / 2019.7.19
- 【CSS】olのリストで①、②、③(丸数字)を表示させる
- web / 2019.10.2
- 【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
- web / 2019.1.22
- 【CSS】三角アイコンと矢印アイコンをつくる
Googleさんのおすすめ
デザインの記事
- 2021.03.01
- Studio Willen
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.03.01
- Studio Willen
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.02.09
- 余白のある家だなと思います/窓の家と生活
- 余白のある家だなと思います この穴なくてもよかったかなと思うことがあります この穴…
- いつかのこと – 無印良品の家と暮らす
- 2021.02.01
- 寝返り、できた
- もくじ 娘ちゃん3か月と24日 あんよを上手に使います 一度覚えたら 2日後 くるんと起き…
- いつかのこと – 無印良品の家と暮らす