【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");
  });
});

サンプルページはこちら