【jQuery】指定した個数づつ開くアコーディオン

2022.03.18　Posted by Coding_team

Webプログラミング

こんにちは、今回は「指定した個数づつ開くアコーディオン」を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>

</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;
}

.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以下になったら「もっとみる」ボタンを非表示
		}
	});
});