なんにもない日の頭の中はこんなもんだったりする

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

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

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

jQuery日本語リファレンス

jQuery（英語版）

さいごに

きのこさん
コッペパンが好きです
きのこさん
クリームパンが好きです
いつかのこと
Web design gallery - デザインのこと - ウェブデザインあつめました。

おすすめ

Web design gallery - デザインのこと - ウェブデザインあつめました。

かんれん

【WordPress】プラグインなしで人気記事（ランキング）を載せる
【jQuery】アコーディオン実装サンプル10選
CSSだけで、しましま（縞模様）をつくる
【flexbox】上下中央揃え

ランキング

#1 miya
CSSだけで、三角アイコンと矢印アイコンをつくる
【CSS】olのリストで①、②、③（丸数字）を表示させる
【jQuery】プルダウンメニューでページ内リンク