記事一覧で、もっと見るボタンをクリックすると
３件ずつ項目が増えていくなど、
項目が指定の件数ずつ増えていく動作の実装方法をご紹介します。
jQueryで実装します。

もっと見るボタンの動作詳細

もっと見るボタンをクリックするとアクションが発動します。
最後まで表示されるとボタンが消える仕組みとなっています。

jQueryでもっと見るボタンを実装！

HTML

<div class="accordion-list">
<ul class="detail-list">
  <li>
    <a href="#">
      <div class="img-box">
        <img src="/img/cat.png" alt="サンプル" />
      </div>
      <div class="title-box">
        <p class="title">サンプル</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img-box">
        <img src="/img/cat.png" alt="サンプル" />
      </div>
      <div class="title-box">
        <p class="title">サンプル</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img-box">
        <img src="/img/cat.png" alt="サンプル" />
      </div>
      <div class="title-box">
        <p class="title">サンプル</p>
      </div>
    </a>
  </li>
・
・
・
長いので省略します。同じ項目が6件続きます。
</ul>
<p class="link-button"><a class="more-button">もっと見る</a></p>
</div>

まずはHTMLでリストを作成。
一番下にもっと見るボタンを配置して、aタグにclassを挿入します。

CSS

ul.detail-list {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 2em 3em;
  margin: 8% auto;
  width: 100%;
}
ul.detail-list li {
  width: calc(33.333% - 2em);
  height: auto;
  position: relative;
}
@media (max-width: 767px) {
ul.detail-list li {
    width: 100%;
  }
}
ul.detail-list li .img-box {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}
ul.detail-list li img {
  width: 100%;
  height: auto;
  aspect-ratio: 360/230;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
}
ul.detail-list li p.title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 1em auto 0.5em;
}
p.link-button {
  width: 250px;
  text-align: center;
  margin: 0 auto;
}
p.link-button a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  padding: 10px;
  color: #fff;
  background: linear-gradient(90deg, #1fbde1, #4bbbd4);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 50px;
  transition: 0.3s;
  text-decoration: none;
}
p.link-button a:hover {
  color: #fff;
  opacity: 1;
  background: #666;
}
.hidden {
  display: none;
}

諸々装飾します。
一番下の「.hidden」はjQuery発動の際重要となるため、
この記述は必ず入れるようにしてください。

jQuery

//一覧にもっと見るボタンを追加
 $(function () {
  var count = 3; // 初期表示件数
  var add = 3; // 増加件数

  $('.accordion-list').each(function () {
    var dsc = $(this);

    dsc.find('li:nth-child(n + ' + (count + 1) + ')').addClass('hidden');

    dsc.find('.more-button').on('click', function() {
      dsc.find('li.hidden').slice(0, add).removeClass('hidden'); // 次の3件を表示

      // すべての記事が表示されたらボタンを非表示にする
      if (dsc.find('li.hidden').length === 0) {
        dsc.find('.more-button').hide();
      }
  });
});
 });

まず初めに、リストの1件目から3件目まで表示させて、
4件目以降は非表示になるようliタグのclassにhiddenを挿入するようにします。

その後、もっと見るボタンをクリックすると３件ずつ表示されるよう、
hiddenの削除設定をします。
全て表示されるとボタンが非表示になります。
初期表示件数と増加件数はお好きな数字に変更してください。

POINT
ここでポイントなのが、
var dsc = $(this);を使用して.accordion-listを取得していることで、
.accordion-listから探す処理をして限定的にしています。
ページ内で複数このリストを配置する場合も兼ねての記述となります。
そのため、この位置に記述がないとうまく動かないので気をつけてください。

ちょっとこぼれ話

全表示されると閉じるボタンが表示されるバージョンもご紹介します。

全表示されると閉じるボタンが出現する動作詳細

HTML

<div class="accordion-list">
<ul class="detail-list">
  <li>
    <a href="#">
      <div class="img-box">
        <img src="/img/cat.png" alt="サンプル" />
      </div>
      <div class="title-box">
        <p class="title">サンプル</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img-box">
        <img src="/img/cat.png" alt="サンプル" />
      </div>
      <div class="title-box">
        <p class="title">サンプル</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img-box">
        <img src="/img/cat.png" alt="サンプル" />
      </div>
      <div class="title-box">
        <p class="title">サンプル</p>
      </div>
    </a>
  </li>
・
・
・
長いので省略します。同じ項目が6件続きます。
</ul>
<p class="link-button"><a class="more-button">もっと見る</a></p>
<p class="link-button"><a class="close-button">閉じる</a></p>
</div>

前述のHTMLのもっと見るボタンの下に、閉じるボタンを配置します。
CSSは前述と同じなので割愛します。

jQuery

//一覧にもっと見るボタンを追加(全表示されると閉じるボタンが出現)
/*$(function () {
  var count = 3; // 初期表示件数
  var add = 3; // 増加件数

  $('.accordion-list').each(function () {
    var dsc = $(this);

    dsc.find('li:nth-child(n + ' + (count + 1) + ')').addClass('hidden');
    dsc.find('.close-button').hide();

    dsc.find('.more-button').on('click', function() {
    dsc.find('li.hidden').slice(0, add).removeClass('hidden'); // 次の3件を表示

      // すべての記事が表示されたらボタンを非表示にする
      if (dsc.find('li.hidden').length === 0) {
        dsc.find('.more-button').hide();
        dsc.find('.close-button').show();

          // 閉じるボタンが表示されたら一覧を初期表示件数にする
          dsc.find('.close-button').click(function() {
            // 初期表示件数を表示する
            dsc.find('li:nth-child(n + ' + (count + 1) + ')').addClass('hidden');
  
            // 閉じるボタンを隠し、もっと見るボタンを表示する
            dsc.find('.close-button').hide();
            dsc.find('.more-button').show();
          });

      }
  });
});
 });

閉じるボタンの記述を追加します。
非表示にしておき、全表示されると出現するようにします。
さらに、閉じるボタンをクリックした際のアクション詳細も記述します。

以上となります。
少しでも参考になりましたら幸いです。