Image may be NSFW.
こんにちは、今回は「指定した個数づつ開くアコーディオン」をjQueryで実装したいと思います。
以前案件で作成する際、意外と面倒だったので使いまわせる形としてここに残しておきたいと思います。
まずはDEMOを作成しましたので挙動をご覧ください。アコーディオンにしたい要素の個数を変えて3パターン（偶数個、奇数個、少ない個数）を用意しました。
→DEMO
最初に2個表示して、2個ずつ開く形にしています。アコーディオンにしたい要素の個数が2個以下になったらボタンを非表示にするという仕様です。
以下のページを参考にさせていただきました。記事作成者に感謝です！
[Qiita]【jQuery】要素をn個ずつ表示するtoggleボタン【ぬるっと】
参考ページではアコーディオンを複数設置するのに対応していなかったので、私の方で複数設置したり使いまわせるよう作り直してみました。
以下がソースになります。
■HTML（アコーディオン部分）
<div class="accordion_box">
<ul class="accordion">
<li><img src="img/001.jpg" width="980" height="500" alt=""></li>
<li><img src="img/001.jpg" width="980" height="500" alt=""></li>
<li><img src="img/001.jpg" width="980" height="500" alt=""></li>
<li><img src="img/001.jpg" width="980" height="500" alt=""></li>
<li><img src="img/001.jpg" width="980" height="500" alt=""></li>
<li><img src="img/001.jpg" width="980" height="500" alt=""></li>
</ul>
<p class="trigger">もっとみる</p>
</div>
構造は単純で.accordion_box内に.accordionがアコーディオンにしたい部分、.triggerがアコーディオンを開くボタンとなっています。
■CSS
.accordion_box {
padding: 0 0 50px;
position: relative;
}
.accordion_box .accordion {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.accordion_box .accordion > li {
width: 49%;
margin: 0 0 20px;
}
.accordion_box .accordion > li.none {
display: none; /* 必須 */
}
.accordion_box .trigger {
display: none; /* 必須 */
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
width: 160px;
padding: 10px 0;
margin: 0 auto;
border: 1px solid #333;
border-radius: 5px;
cursor: pointer;
}
CSSは/* 必須 */と書いてあるところがポイントで、要素の非表示用のクラスを用意しボタンも予め非表示にしておきます。
■javascript
$(function(){
var num = 2; //何個づつ開くか指定
var d_num = 2; //最初表示させたい個数を指定
$('.accordion_box').each(function() { //.accordion_boxを検索
$('.accordion > li:gt('+ (d_num - 1) +')',this).addClass('none'); //d_numより後の要素は.none付与
if ($('.accordion > li',this).length > d_num) {
$('.trigger',this).show(); //d_numより要素の数が多ければ「もっとみる」ボタン表示
}
});
$('.accordion_box .trigger').on('click', function() {
var h_tag = $(this).parents('.accordion_box').find('.accordion li.none'); //クリックしたボタンに関連する.accordionの非表示要素を取得
var h_tag_num = h_tag.length; //非表示要素の個数を変数に格納
h_tag.slice(0, num).slideDown('fast').removeClass('none'); //num個までの非表示要素を開いて.noneを外す
if (num >= h_tag_num) {
$(this).hide(); //非表示要素の個数がnum以下になったら「もっとみる」ボタンを非表示
}
});
});
javascript部分の説明は一緒に記述しときました。numに何個づつ開くか、d_numに最初に表示しておきたい個数を自由に指定できるようにしました。基本的にここの数値だけ変えれば色んな形に対応できるようにしています。
再度DEMOのリンクを載せときますね。
→DEMO
出来る限り使いまわししやすい形にして色んなパターンの確認をしましたが、それでもバグなどあったらごめんなさい。
簡単に出来そうに見えて意外と面倒な「指定した個数づつ開くアコーディオン」、是非自由にご利用ください。
以上、このあたりで終わりたいと思います。
The post 【jQuery】指定した個数づつ開くアコーディオン first appeared on ウェブラボ（株）スタッフブログ .
こんにちはウェブラボクリエイターズメモです。
