ねこのひたい もっと見るで指定した件数ずつ表示させる
jQuery
サンプルはこちら
[html]
<div class="js-accordion">
<ul>
<li>TEXT 01</li>
<li>TEXT 02</li>
<li>TEXT 03</li>
<li>TEXT 04</li>
<li>TEXT 05</li>
<li>TEXT 06</li>
<li>TEXT 07</li>
<li>TEXT 08</li>
<li>TEXT 09</li>
<li>TEXT 10</li>
<li>TEXT 11</li>
<li>TEXT 12</li>
<li>TEXT 13</li>
<li>TEXT 14</li>
<li>TEXT 15</li>
<li>TEXT 16</li>
<li>TEXT 17</li>
<li>TEXT 18</li>
<li>TEXT 19</li>
<li>TEXT 20</li>
</ul>
<div class="btn js-btn-more">もっと見る</div>
<div class="btn js-btn-close">閉じる</div>
</div>
[/html]
[js]
$(function () {
// liの数を取得
const listItems = $(".js-accordion li").length;
$(".js-accordion").each(function () {
// 最初に表示させるliの数
let num = 5,
// 閉じた時に表示させるliの数
closeNum = num – 1;
// 最初はもっと見るボタン表示、閉じるボタン非表示
$(this).find(".js-btn-more").show();
$(this).find(".js-btn-close").hide();
// 5行目まで表示
$(this)
.find("li:not(:lt(" + num + "))")
.hide();
// もっと見るボタンがクリックされた時
$(".js-btn-more").click(function () {
// numに+5ずつしていく = 5行ずつ追加する
num += 5;
$(this)
.parent()
.find("li:lt(" + num + ")")
.slideDown();
// liの数よりnumが多い時、
if (listItems <= num) {
// もっと見るボタン非表示
$(".js-btn-more").hide();
// 閉じるボタン表示
$(".js-btn-close").show();
// 閉じるボタンがクリックされたら、
$(".js-btn-close").click(function () {
$(this)
.parent()
.find("li:gt(" + closeNum + ")")
// 6行目以降は非表示
.slideUp();
// 閉じるボタンを非表示
$(this).hide();
// もっと見るボタン表示に
$(".js-btn-more").show();
});
}
});
});
});
[/js]
[css]
.btn {
border: 1px solid #333;
cursor: pointer;
display: inline-block;
font-size: 18px;
margin-top: 10px;
padding: 10px;
}
[/css]
