【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 / 2020.2.5
- 【jQuery】『slick』を使って全画面表示のスライドショー
- web / 2020.2.13
- 【jQuery】モバイルファーストが素敵な『fancybox3』実装サンプル集
- web / 2018.12.22
- 【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え
- web / 2020.8.14
- 【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
- web / 2019.7.22
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.7.24
- 【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2019.7.19
- 【CSS】olのリストで①、②、③（丸数字）を表示させる
- web / 2019.10.2
- 【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
- web / 2019.1.22
- 【CSS】三角アイコンと矢印アイコンをつくる
- web / 2019.9.6
- LINE風の吹き出しの会話をCSSで作ってみる
Googleさんのおすすめ
デザインの記事
- 2020.09.14New
- 日産｜ブランドサイト
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2020.09.14New
- 日産｜ブランドサイト
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2020.06.02
- ぼくのトミカ ＃1
- あ、ゴミ収集車だ 何度か手を振ってもらったり 燃えるゴミの日は窓から見てる
- いつかのこと – 無印良品の家と暮らす
- 2020.06.01
- ぼくね、もっと走りたいんだよ
- あたらしい遊びを考えてるんだ。 パパもあたらしい遊びを考えてね。 じゃあ、好きな色…
- いつかのこと – 無印良品の家と暮らす