【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");
});
//閉じるボタンがクリックされたら
$('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;
});
});
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.2.22
- 【jQuery】プルダウンメニューでページ内リンク
- web / 2021.10.28
- 【jQuery】タブを効率良く作ってみる（複数設置、プラグインなし）
- web / 2021.10.4
- 【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
- web / 2020.2.5
- 【jQuery】『slick』を使って全画面表示のスライドショー
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2019.7.22
- 【jQuery】アコーディオン実装サンプル10選
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
Googleさんのおすすめ
デザインの記事
- 2022.01.28New
- 大阪の写真スタジオ｜かしこまらない写真館「日日花（にちにちか）」
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.01.28New
- 大阪の写真スタジオ｜かしこまらない写真館「日日花（にちにちか）」
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.07.07
- あったらいいなと思うもの／窓の家と生活
- あったらいいなと思うもの 緑（観葉植物） ドライフラワー プロジェクター 影が楽しい…
- いつかのこと – 無印良品の家と暮らす
- 2021.06.30
- 『未来のミライ』、何度も見てしまう
- (C)2018 スタジオ地図 もくじ 4歳の男の子と0歳の女の子 好きなセリフ10選 「そりかえ…
- いつかのこと – 無印良品の家と暮らす