【アコーディオンメニュー】コンテンツの表示数を指定して表示

コンテンツの表示数を指定して表示し、指定の数を超えるコンテンツは非表示にします。非表示のコンテンツは「もっと見る」ボタンで表示数分だけ表示し、コンテンツを全て表示したタイミングで「もっと見る」ボタンを非表示にします。なおコンテンツが指定の表示数と同じかそれよりも少ない場合は「もっと見る」ボタンを非表示にします。

もっと見る

html、CSSのコードは下記の記事と同様です。

【アコーディオンメニュー】コンテンツの最大数を指定して表示

コンテンツの最大数を指定して表示し、指定の数を超えるコンテンツは非表示にします。非表示のコンテンツは「もっと見る」ボタンで表示、「閉じる」ボタンで非表示にします。なおコンテンツが指定の最大数と同じかそれよりも少ない場合は「もっと見る」ボタンを非表示にします。

tech.brick-plan.jp

2020.08.26

最後にjQueryのコードです。
まず、タイトルとテキストのpタグを囲ったdivタグの数を変数contentsCountに代入します。これが実際のコンテンツの数になります。また、コンテンツの表示数を変数iに代入します。コンテンツの数が表示数と同じかそれよりも小さい場合は「もっと見る」ボタンを非表示にします。コンテンツの数が表示数よりも大きい場合はCSSの疑似クラスを利用したセレクタで、クラス名is-hiddenを付与し非表示にします。.contents_wrap:nth-of-type(n + 4)は4以上のコンテンツ全てが対象になります。
次に「もっと見る」ボタンクリック時の動作です。非表示になっているクラス名is-hiddenが付与されたコンテンツをセレクタにするのがポイントです。sliceは開始位置を0、終了位置を表示数の3に指定します。終了位置の要素は取得しないため、要素の最初から3番目までを取得できます。クラス名is-hiddenを削除しslideDown();で表示します。これを繰り返すことでコンテンツを表示数分だけ表示していく動作になります。なおクラス名is-hiddenが付与されたコンテンツがなくなったタイミングで「もっと見る」ボタンをフェードアウトで非表示にします。

$(function(){
	var contentsCount = $('.contents_wrap').length;
	var i = 3;

	if(contentsCount <= i) {
		$('.contents_btn').hide();
	} else {
		$('.contents_wrap:nth-of-type(n + ' + (i + 1) + ')').addClass('is-hidden').hide();

		$('.contents_btn').on('click', function() {
			$('.contents_wrap.is-hidden').slice(0, i).removeClass('is-hidden').slideDown();
			if($('.contents_wrap.is-hidden').length == 0) {
				$('.contents_btn').fadeOut();
			}
		});
	}
});