「もっと見る」をクリックするとn件ずつ記事が表示される機能を実装！ソースコードあり！

<div class="article__list">
	<article class="article__item">
		<a href="#">
			<div class="article__img">
				<img src="#" alt="サムネイル" width="400" height="225">
			</div>
			<div class="article__txt">
				<div class="article__txt-upper">
					<div class="article-cat__list">
						<div class="article-cat__item">カテゴリー01</div>
						<div class="article-cat__item">カテゴリー02</div>
					</div>
					<p class="article__ttl">タイトルタイトルタイトルタイトルタイトルタイトル</p>
				</div>
				<div class="article__txt-under">
					<span class="article-date">2023.00.00</span>
					<p class="article-readmore">
						<span>詳しく見る</span>
						<span class="bg-black icon-circle arrow-right"></span>
					</p>
				</div>
			</div>
		</a>
	</article>
  ・・・
  <!-- <article>タグ内は記事分 -->
  ・・・
  <!-- 7件目以降を最初非表示にするため「is-hidden」を付与 -->
  <article class="article__item is-hidden">
      <!-- 省略 -->
  </article>
</div>
<div class="btn-center">
	<div id="showMore" class="btn-link">
		<span>もっと見る</span>
		<span class="arrow-down bg-black"></span>
	</div>
</div>

.is-hidden {
    display: none;
}
.article__list {
    margin-bottom: 48px;
}
.article__item {
    background-color: #fff;
}
.article__item a {
    display: block;
    box-shadow: 0 8px 24px rgba(64, 64, 64, 0.16);
}
.article__item a:hover {
    box-shadow: 0 8px 24px rgba(64, 64, 64, 0.32);
}
.article__img {
    position: relative;
}
.article__img::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.article__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.article__txt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    min-height: 226px;
}
.article-cat__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.article-cat__item {
    font-size: 10px;
    line-height: 1.3;
    border: 1px solid #333;
    padding: 2px 4px;
    border-radius: 3px;
}
.article__ttl {
    font-size: 14px;
}
.home .article__ttl {
    font-size: 14px;
}
.article__txt-under {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.article-date {
    font-size: 12px;
    line-height: 1;
    color: #8e8e8e;
}
.article-readmore {
    position: relative;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
}
.btn-center {
    text-align: center;
}
.btn-link {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 320px;
    line-height: 54px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background-color: #333;
    border-radius: 50px;
    box-shadow: 0 16px 32px rgba(64, 64, 64 ,0.2);
    margin-top: 54px;
}
.btn-link:hover {
    box-shadow: 0 16px 32px rgba(64, 64, 64 ,0.4);
}
.icon-circle {
    position: relative;
    display: inline-block;
    border-radius: 50%;
}
.article-readmore .icon-circle {
    width: 28px;
    height: 28px;
    margin-left: 8px;
}
.bg-gray {
    color: #707070;
    background-color: #eee;
}
.bg-black {
    color: #fff;
    background-color: #333;
}
.arrow-down::before,
.arrow-right::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
}
.arrow-down::before {
    left: 90%;
    transform: translate(0,-50%) rotate(135deg);
}
.arrow-right::before {
    left: 45%;
    transform: translate(-50%,-50%) rotate(45deg);
}
.btn-link .arrow-down::before,
.article-readmore .arrow-right::before {
    width: 6px;
    height: 6px;
    border-width: 2px;
}
@media screen and (min-width: 768px) {
    .article__list {
        display: flex;
        flex-wrap: wrap;
        gap: 48px 40px;
    }
    .article__item {
        width: calc(33% - 24px);
    }
}
@media screen and (max-width: 767px) {
    .article__item:nth-of-type(n+2) {
        margin-top: 40px;
    }
}

document.addEventListener('DOMContentLoaded', function() {
	const showMoreButton = document.getElementById('showMore');
	let hiddenArticles = document.querySelectorAll('.article__item.is-hidden');

	showMoreButton.addEventListener('click', function(e) {
		e.preventDefault();
		const n = 6;
		for (let i = 0; i < n; i++) {
			if (hiddenArticles.length > 0) {
				hiddenArticles[0].classList.remove('is-hidden');
				hiddenArticles = document.querySelectorAll('.article__item.is-hidden');
			} else {
				showMoreButton.style.display = 'none';
				break;
			}
		}
	});
});