【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の日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

さいごに

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

デザコト

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

Googleさんの
おすすめ

3

/

19

2024

Googleさんの
おすすめ

3

/

19

2024

デザインの記事

HAKUTAI WEDDING
増量計画
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える