【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.7.17
- 【jQuery】テキストをクリップボードにコピーする方法のあれこれ
- web / 2021.4.15
- 【jQuery】 ローディング、実装サンプル集
- web / 2019.12.6
- 【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集
- web / 2019.10.9
- 【jQuery】チェックボックスにチェックを入れるとボタンが活性化する
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.6.18
- 【CSS】背景（background）を2色にする
Googleさんのおすすめ
デザインの記事
- 2021.06.09New
- BLUEMOON DESIGN OFFICE｜ブルームーンデザイン事務所
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.06.09New
- BLUEMOON DESIGN OFFICE｜ブルームーンデザイン事務所
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.06.02
- 4さいのぼくのもくひょう。
- ぼく、4さいになったよ。 じつはね、ゆいたいことがあるんだ。 4さいの、もくひょう。 …
- いつかのこと – 無印良品の家と暮らす
- 2021.05.23
- 丸椅子と僕 #4
- 僕には妹がいる まだ0歳 もうすぐ8か月 まだ歩けない つかまり立ちはできる よく僕の真…
- いつかのこと – 無印良品の家と暮らす