<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;
}

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();
  }
});