【jQuery】一定数以上のリスト・ニュースを「もっと見る」で折りたたむ完全ガイド｜nth-child・slideToggle・段階的表示・完全展開まで

ニュース一覧や記事リストで「最初は数件だけ表示して、残りは「もっと見る」ボタンで展開する」というUIはページをすっきりさせるとともに、ユーザーが必要に応じてコンテンツを取得できる優れたUXパターンです。

この記事ではCSSのnth-child・jQueryのslideToggle・段階的に追加表示する方法まで、用途に合わせた複数の実装パターンを解説します。

基本実装: CSS + jQuery で折りたたみ

最もシンプルなパターンです。CSSで4件目以降を非表示にし、ボタンクリックで slideToggle() を使って開閉します。

HTML

<ul class="news-list">
  <li><span class="news-date">2025年12月01日</span>新機能をリリースしました。</li>
  <li><span class="news-date">2025年11月15日</span>メンテナンスのお知らせ</li>
  <li><span class="news-date">2025年10月30日</span>サービス料金を改定しました。</li>
  <li><span class="news-date">2025年10月01日</span>秋のキャンペーンを開始しました。</li>
  <li><span class="news-date">2025年09月12日</span>UI/UXをリニューアルしました。</li>
  <li><span class="news-date">2025年08月25日</span>アプリの最新版を公開しました。</li>
</ul>
<button class="more-btn">もっと見る</button>

CSS（初期表示を3件に制限）

.news-list > li:nth-child(n+4) {
  display: none;
}

JavaScript

$(function () {
  // アイテムが3件以下ならボタンを非表示
  var limit = 3;
  if ($('.news-list > li').length <= limit) {
    $('.more-btn').hide();
  }

  $('.more-btn').on('click', function () {
    var isOpen = $(this).hasClass('is-open');

    // 4件目以降をslideで開閉
    $('.news-list > li:nth-child(n+' + (limit + 1) + ')').slideToggle(300);

    // ボタンのテキストと状態を切り替える
    $(this)
      .text(isOpen ? 'もっと見る' : '閉じる')
      .toggleClass('is-open');
  });
});

初期表示件数をJavaScriptで制御する（推奨）

CSSではなくJavaScriptで初期表示件数を制御する方法です。WordPressなどで件数を動的に変更したい場合や、スマホとPCで件数を変えたい場合に便利です。

<ul id="news-list">
  <li>ニュース1</li>
  <li>ニュース2</li>
  <li>ニュース3</li>
  <li>ニュース4</li>
  <li>ニュース5</li>
  <li>ニュース6</li>
</ul>
<button id="more-btn">もっと見る</button>

$(function () {
  var LIMIT = 3;  // 初期表示件数
  var $items  = $('#news-list > li');
  var $btn    = $('#more-btn');

  // 初期状態: LIMIT件目以降を非表示
  $items.slice(LIMIT).hide();

  // 件数がLIMIT以下ならボタン不要
  if ($items.length <= LIMIT) {
    $btn.hide();
    return;
  }

  $btn.on('click', function () {
    var isOpen = $(this).hasClass('is-open');

    if (isOpen) {
      // 閉じる: LIMITより後を非表示 + スクロールを先頭へ
      $items.slice(LIMIT).slideUp(300);
      $(this).text('もっと見る').removeClass('is-open');
    } else {
      // 開く: 全件表示
      $items.slice(LIMIT).slideDown(300);
      $(this).text('閉じる').addClass('is-open');
    }
  });
});

「もっと見る」を押すたびに数件ずつ追加表示する

SNSのタイムラインのように、クリックするたびに数件ずつ追加で表示するパターンです。全件表示後はボタンを非表示にします。

$(function () {
  var INITIAL = 3;   // 最初に表示する件数
  var ADD     = 3;   // 「もっと見る」で追加する件数
  var shown   = INITIAL;
  var $items  = $('#news-list > li');
  var $btn    = $('#more-btn');

  // 初期状態: INITIAL件のみ表示
  $items.hide().slice(0, shown).show();

  // 全件以下なら最初からボタンを非表示
  if ($items.length <= INITIAL) {
    $btn.hide();
    return;
  }

  $btn.on('click', function () {
    // 次の ADD 件を表示
    $items.slice(shown, shown + ADD).slideDown(300);
    shown += ADD;

    // 全件表示したらボタンを非表示
    if (shown >= $items.length) {
      $(this).fadeOut(200);
    }
  });
});

CSS トランジションを使ったスムーズなアニメーション

slideToggle() の代わりにCSSトランジションを使うと、より滑らかなアニメーションが実現できます。ただし height: auto はトランジションが効かないため、max-height を使うテクニックを使います。

.news-list > li:nth-child(n+4) {
  display: block;        /* display:none ではなく */
  max-height: 0;         /* max-height でアニメーション */
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.news-list.is-open > li:nth-child(n+4) {
  max-height: 200px;     /* 十分に大きな値 */
  opacity: 1;
}

$(function () {
  $('.more-btn').on('click', function () {
    $('.news-list').toggleClass('is-open');
    var isOpen = $('.news-list').hasClass('is-open');
    $(this).text(isOpen ? '閉じる' : 'もっと見る');
  });
});

「もっと見る」とページネーションの比較

まとめ

jQueryで「もっと見る」UIを実装する方法を用途によって選びましょう。

• シンプル開閉: CSS :nth-child(n+4) + slideToggle()
• JS管理推奨: $items.slice(LIMIT).hide() で件数を変数管理
• 段階的表示: slice(shown, shown + ADD).slideDown() で追加表示
• 全件表示後: fadeOut() でボタンを非表示
• CSSアニメ: max-height + transition でスムーズな開閉

関連記事: アコーディオン完全ガイド / アコーディオン実装方法の完全比較 / ボタンクリックで要素の表示・非表示を切り替える

よくある質問（FAQ）