jQueryで「もっと見る」ボタンを実装して、クリック時に表示数を増やす方法

投稿日 2025年9月29日
著者 mako110
カテゴリー WEBのこと

掲題の通りですが、
例えばお客様の声やコメントについて、
リストで列挙して表示したいのですが、
数が多いので、最初は数件のみ表示させておいて
「もっと見る」のボタンを押したら少しずつ表示を増やしていきたい時ってありませんか？

私はありました笑。

なので、下記の形で実装しております。
まずはサンプルをどうぞ。

こんな感じで、最初は全体のコメントの5件だけを表示しておいて、
「もっと見る」をクリックしたら5件ずつ表示を増やし、
全件を表示したら、「もっと見る」ボタンを「閉じる」ボタンにし、
「閉じる」ボタンを押したら最初の表示に戻る感じです。

まずはHTML部分はこんな感じ

<div class="js-accordion">
<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>
</ul>
<div class="btn js-btn-more">コメントをもっと見る</div>
<div class="btn js-btn-close">閉じる</div>
</div>

<ul>

<li>テキストテキスト</li>

</ul>

<div class="btn js-btn-more">コメントをもっと見る</div>

</div>

JS部分はこんな感じです。

<script type="text/javascript">
$(function () {
  $(".js-accordion").each(function () {
    const $accordion = $(this);
    const $items = $accordion.find("li");
    const $btnMore = $accordion.find(".js-btn-more");
    const $btnClose = $accordion.find(".js-btn-close");

    let num = 5;            // 初期表示件数
    const step = 5;         // 追加表示件数
    const closeNum = num - 1;

    // 初期状態
    $items.hide().slice(0, num).show();
    $btnMore.show();
    $btnClose.hide();

    // もっと見る
    $btnMore.on("click", function () {
      num += step;
      $items.slice(0, num).slideDown();

      if (num >= $items.length) {
        $btnMore.hide();
        $btnClose.show();
      }
    });

    // 閉じる
    $btnClose.on("click", function () {
      $items.slice(closeNum + 1).slideUp();
      num = step; // もう一度5件ずつ追加できるようにリセット
      $btnMore.show();
      $btnClose.hide();
    });
  });
});
</script>