<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="list">
<li class="list-item">item1</li>
<li class="list-item">item2</li>
<li class="list-item">item3</li>
<li class="list-item">item4</li>
<li class="list-item">item5</li>
<li class="list-item">item6</li>
<li class="list-item">item7</li>
<li class="list-item">item8</li>
<li class="list-item">item9</li>
<li class="list-item">item10</li>
<li class="list-item">item11</li>
<li class="list-item">item12</li>
<li class="list-item">item13</li>
<li class="list-item">item14</li>
<li class="list-item">item15</li>
<li class="list-item">item16</li>
<li class="list-item">item17</li>
<li class="list-item">item18</li>
<li class="list-item">item19</li>
<li class="list-item">item20</li>
</ul>
<div class="list-btn">
<button>もっと見る</button>
</div>.list-item{
opacity: 1;
}
.list-item.is-hidden {
opacity: 0;
height: 0;
margin: 0;
}
.list-btn {
margin-top: 20px;
}
.list-btn.is-btn-hidden{
display:none;
}
.list-btn button {
background-color: #333;
color:#fff;
border: none;
cursor: pointer;
outline: none;
padding: 0;
height: 32px;
line-height: 32px;
width: 120px;
}/* ここには、表示するリストの数を指定します。 */
var moreNum = 5;
/* 表示するリストの数以降のリストを隠しておきます。 */
$('.list-item:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden');
/* 全てのリストを表示したら「もっとみる」ボタンをフェードアウトします。 */
$('.list-btn').on('click', function() {
$('.list-item.is-hidden').slice(0, moreNum).removeClass('is-hidden');
if ($('.list-item.is-hidden').length == 0) {
$('.list-btn').fadeOut();
}
});
/* リストの数が、表示するリストの数以下だった場合、「もっとみる」ボタンを非表示にします。 */
$(function() {
var list = $(".list li").length;
if (list < moreNum) {
$('.list-btn').addClass('is-btn-hidden');
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.