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

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

もっと見る

htmlのコードは下記になります。
タイトルとテキストのpタグをdivタグで囲ったシンプルな構造です。最下部に「もっと見る」ボタンを配置します。

<div class="contents_wrap">
	<p class="contents_title">タイトル1</p>
	<p class="contents_txt">ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="contents_wrap">
	<p class="contents_title">タイトル2</p>
	<p class="contents_txt">ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="contents_wrap">
	<p class="contents_title">タイトル3</p>
	<p class="contents_txt">ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="contents_wrap">
	<p class="contents_title">タイトル4</p>
	<p class="contents_txt">ダミーテキストダミーテキストダミーテキスト</p>
</div>
<p class="contents_btn">もっと見る</p>

続いてCSSのコードです。「もっと見る」ボタンの装飾は疑似要素を利用しています。

.contents_wrap {
	background:#d6d6d6;
	border-radius:5px;
	margin:0 0 20px;
}
.contents_title {
	font-weight:bold;
	line-height:42px;
	margin:0;
	padding:0 0 0 10px;
}
.contents_txt {
	margin: 0;
	padding:10px;
	background:#fff;
	border-left:1px solid #d6d6d6;
	border-right:1px solid #d6d6d6;
	border-bottom:1px solid #d6d6d6;
}
.contents_btn {
	position: relative;
	width: 200px;
	min-height: 60px;
	line-height: 60px;
	margin: 0 auto;
	background: linear-gradient(to bottom, #3d3c3c 0%, #131313 100%);
	border-radius: 10px;
	color: #fff;
	text-align: center;
}
.contents_btn:after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	width: 198px;
	min-height: 58px;
	display: block;
	border: 1px solid #fff;
	border-radius: 9px;
	box-sizing: border-box;
}
.contents_btn:hover {
	cursor: pointer;
}

最後にjQueryのコードです。
まず、タイトルとテキストのpタグを囲ったdivタグの数を変数contentsCountに代入します。これが実際のコンテンツの数になります。また、表示したいコンテンツの最大数を変数nに代入します。コンテンツの数が表示最大数と同じかそれよりも小さい場合は「もっと見る」ボタンを非表示にします。コンテンツの数が表示最大数よりも大きい場合はsliceを利用して表示最大数を超えるコンテンツを非表示にします。
sliceは終了位置を指定せず要素の最後までを取得します。今回はインデックスが「2」のため、要素の3番目から最後までを取得しています。
次に「もっと見る」ボタンクリック時の動作です。非表示になっているコンテンツの有無で条件を分岐します。非表示のコンテンツがある場合はコンテンツを表示し、「もっと見る」ボタンを「閉じる」ボタンに変更します。非表示のコンテンツがない場合は表示最大数を超えるコンテンツを非表示にし、「閉じる」ボタンを「もっと見る」ボタンに変更します。

$(function(){
	var contentsCount = $(".contents_wrap").length;
	var n = 2;

	if(contentsCount <= n) {
		$(".contents_btn").hide();
	} else {
		$(".contents_wrap").slice(n).hide();

		$(".contents_btn").click(function(){
			if ($(".contents_wrap").slice(n).is(':hidden')) {
				$(".contents_wrap").slice(n).slideDown();
				$(this).text('閉じる');
			} else {
				$(".contents_wrap").slice(n).slideUp();
				$(this).text('もっと見る');
			}
		});
	}
});