問題 × 解決策

リストで5件目より後を隠す

問題

リストで5件目より後を隠すには?

解決策

jQueryで6件目以降を非表示にし、ボタンを生成してコントロールする。

リストの表示件数のコントロール

お知らせ等のリストで、10、20件と増えていくと、周りの要素を圧迫してしまいます。
そこで5件だけ表示し、さらに見たい人用に「もっと見る」というボタンを配置し、ユーザーに表示件数を任せる仕様の構築方法をご紹介します。

DEMOはこちら

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

  • 2019年12月1日 カテゴリ お知らせタイトル

    お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。

HTMLの構築

リストを構築します。

  • 便宜上、リストをクラス「news-list」と定義します。
<ul class="news-list clearfix">
	<li>
		<div class="property-list clearfix">
			<span class="times">2019年12月1日</span> 
			<span class="cat">カテゴリ</span> 
			<span class="titles">お知らせタイトル</span>
		</div>
		<div clsss="text-box clearfix">
			<p>お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。</p>
		</div>
	</li>
	<li>
		<div class="property-list clearfix">
			<span class="times">2019年12月1日</span> 
			<span class="cat">カテゴリ</span> 
			<span class="titles">お知らせタイトル</span>
		</div>
		<div clsss="text-box clearfix">
			<p>お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。</p>
		</div>
	</li>
	... 計10件
</ul>

CSSの構築

クラス「news-list」に対し、CSSを構築します。

.news-list > li {
	margin-bottom: 10px;
	padding: 10px 15px;
	border: 1px solid #c3c3c3;
}
.news-list > li .property-list{
	margin-bottom: 0;
}
.news-list > li .property-list .times{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 93.75%;
}
.news-list > li .property-list .cat{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 1px 10px;
	color: #ffffff;
	font-size: 87.5%;
	background-color: #F15A24;
}
.news-list > li .property-list .titles{
	display: block;
	font-weight: bold;
}
.news-list > li .text-box{
	margin-bottom: 20px;
}
.more_btn{
	text-align: center;
}
.more_btn a{
	display: inline-block;
	padding: 6px 12px;
	color: #F15A24;
	font-weight: bold;
	letter-spacing: 1pt;
	text-decoration: none;
	background-color: #ffffff;
	border: 1px solid #F15A24;
}

jQueryの構築

jQueryを構築します。

var rw = $(window).width();
if($(".news-list").length){
	$(".news-list").each(function(){
		//最初に表示させるアイテムの数
		var fixnums = 5;
		var nums = 5;
		var gtnums = 4;
		var morelist = $(this);
		//liの個数を取得しておく
		var listvol = morelist.find("li").length;
		// ボタンを生成する
		morelist.after('<p class="more_btn"><a href="#">もっと見る</a></p>');
		function mores(){
			//liが設定した表示件数より多ければ
			if(listvol > fixnums){
				var morebtn = morelist.next('.more_btn');
				morebtn.show();
				//設定した件数まで表示
				morelist.find("li:not(:lt("+nums+"))").hide();
				//moreボタンがクリックされた時
				morebtn.find('a').click(function(){
					event.preventDefault();
					// closedクラスを保持しているかどうか
					if(!morebtn.hasClass('closed')){
						// closedクラスを保持していなければ
						//numsに+3ずつしていく = 3行ずつ追加する
						nums +=3;
						morelist.find("li:lt("+nums+")").slideDown();
						//liの個数よりnumsが多い時、
						if(listContents <= nums){
							//アイテムの数のリセット
							nums = 5,
							gtnums = nums-1;
							morebtn.addClass('closed');
							$(this).html('元の件数に戻す');
						}
					}else{
						// closedクラスを保持しているならば
						morelist.find("li:gt("+gtnums+")").slideUp();//設定した件数以降は非表示にし、
						morebtn.removeClass('closed');
						$(this).html('もっと見る');
						//liの個数よりnumsが多い時、
						if(listContents <= fixnums){
							morebtn.hide();
						}
					}
				});
			}else{
				morebtn.hide();
			}
		}; // mores
		mores();
		$(window).resize(function(){
			if(rw > 640 && $(window).width() <= 640) {
				mores();
			}
			if(rw <= 640 && $(window).width() > 640) {
				mores();
			}
			rw = $(window).width();
		})
	}); // $(".news-list").each
}; // $(".news-list").length

参考

【JavaScript – jQuery 「もっと見る」でn件ずつ表示し、末尾に達したら初期件数表示に戻すボタンを設置したい。|teratail】
https://teratail.com/questions/92715

【JavaScript – jQueryで初期は5件表示の記事リストを複数設置したい|teratail】
https://teratail.com/questions/95956

【jQuery リファレンス::lt( )】
http://www.jquerystudy.info/reference/selectors/lt.html

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

9 + 8 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧