もっと見るで指定した件数ずつ表示させる

jQuery

サンプルはこちら
<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>
$(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();
        });
      }
    });
  });
});
.btn {
  border: 1px solid #333;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  margin-top: 10px;
  padding: 10px;
}