<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
<li>item17</li>
<li>item18</li>
<li>item19</li>
<li>item20</li>
<li>item21</li>
</ul>
<div class="more">
<button>もっと見る</button>
</div>
.list {
width: 200px;
margin: 50px auto;
padding: 0;
}
.list li {
opacity: 1;
list-style: none;
background-color: #ddd;
margin-top: 10px;
text-align: center;
border-radius: 4px;
height: 200px;
line-height: 32px;
font-size: 13px;
transition: all 0.4s ease 0s;
}
.list li.is-hidden {
opacity: 0;
height: 0;
margin: 0;
}
.more {
text-align: center;
margin-top: 20px;
}
button {
background-color: #bbdeff;
border: none;
cursor: pointer;
outline: none;
padding: 0;
height: 32px;
line-height: 32px;
width: 120px;
border-radius: 16px;
}
View Compiled
var moreNum = 6;
$(".list li:nth-child(n + " + (moreNum + 1) + ")").addClass("is-hidden");
$(".more").on("click", function () {
$(".list li.is-hidden").slice(0, moreNum).removeClass("is-hidden");
if ($(".list li.is-hidden").length == 0) {
$(".more").fadeOut();
}
});
This Pen doesn't use any external CSS resources.