こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はお知らせなど、どうしても数が多くなってしまうコンテンツの便利な見せ方を紹介します！

実装例

「もっとみる」ボタンを押すと5件ずつ表示されるようになっています。

HTML例

<div class="detail-list">
  <ul>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
  </ul>
  <button id="js-more">もっと見る</button>
</div>

CSS例

.detail-list ul{
  padding: 0;
}
.detail-list li{
  list-style: none;
  width: 60%;
  color: #fff;
  background: #999;
  text-align: center;
  padding: 10px;
  margin: 0 auto 15px;
}
#js-more{
  width: 200px;
  margin: auto;
  padding: 10px;
}

JavaScript例

var listContents = document.querySelectorAll(".detail-list li").length;
document.querySelectorAll(".detail-list").forEach(function(detailList) {
    var Num = 5;
    detailList.querySelector('#js-more').style.display = 'block';
    detailList.querySelectorAll("li").forEach(function(li, index) {
        if (index >= Num) {
            li.style.display = 'none';
        }
    });
    detailList.querySelector('#js-more').addEventListener('click', function() {
        Num += 5;
        detailList.querySelectorAll("li").forEach(function(li, index) {
            if (index < Num) {
                li.style.display = 'list-item';
            }
        });
        if (listContents <= Num) {
            detailList.querySelector('#js-more').style.display = 'none';
        }
    });
});

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！