Web制作 jQuery

【jQuery】もっと見るボタンクリックで指定した件数ずつ表示させる方法【サンプル付きで解説】

【jQuery】もっと見るボタンクリックで指定した件数ずつ表示させる方法【サンプル付きで解説】
リストでもっと見るボタンをクリックしたら5件ずつ表示とか出来る?

例えばリストが18件あったとします。

そして以下のようにしたいと思います。

  1. リストが初期状態で5件表示
  2. もっと見るボタンをクリックしたら5件ずつ表示
  3. 18件全部表示されたら、もっと見るボタンが閉じるボタンに変化
  4. 閉じるボタンをクリックしたら初期状態の5件表示に戻り、ボタンはもっと見るボタンに変化

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


jQueryを使ってもっと見るボタンクリックで指定した件数ずつ表示させる方法

今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

まずは冒頭で書いたような状態になるように書いたサンプルをご覧ください。

See the Pen
もっと見るボタン(5件ずつ表示)
by junpei (@junpei-sugiyama)
on CodePen.

 

コード解説

コードの解説をします。まず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>
    <li>コーギー</li>
    <li>ボーダーコリー</li>
    <li>シェルティー</li>
    <li>グレートデン</li>
  </ul>
  <div class="btn js-btn-more">もっと見る</div>
  <div class="btn js-btn-close">閉じる</div>
</div>

ボタンのclass="btn"はレイアウトの為のclassなので必須ではありません。

『ulタグ』『もっと見るボタン』『閉じるボタンを囲うdivタグ』という構成です。

liタグは増減しても問題ありません。

CSSはレイアウトの調整しかしていないので割愛します。

そしてjQueryがこちらです。

$(function () {
  // liの数を取得
  const listItems = $(".js-accordion li").length;
  $(".js-accordion").each(function () {
    // 最初に表示させるliの数
    let num = 5,
      // 閉じた時に表示させるliの数
      closeNum = num - 1;
    // 最初はもっと見るボタン表示、閉じるボタン非表示
    $(this).find(".js-btn-more").show();
    $(this).find(".js-btn-close").hide();
    // 5行目まで表示
    $(this)
      .find("li:not(:lt(" + num + "))")
      .hide();
    // もっと見るボタンがクリックされた時
    $(".js-btn-more").click(function () {
      // numに+5ずつしていく = 5行ずつ追加する
      num += 5;
      $(this)
        .parent()
        .find("li:lt(" + num + ")")
        .slideDown();
      // liの数よりnumが多い時、
      if (listItems <= num) {
        // もっと見るボタン非表示
        $(".js-btn-more").hide();
        // 閉じるボタン表示
        $(".js-btn-close").show();
        // 閉じるボタンがクリックされたら、
        $(".js-btn-close").click(function () {
          $(this)
            .parent()
            .find("li:gt(" + closeNum + ")")
            // 6行目以降は非表示
            .slideUp();
          // 閉じるボタンを非表示
          $(this).hide();
          // もっと見るボタン表示に
          $(".js-btn-more").show();
        });
      }
    });
  });
});

class名は自分の環境に合わせて変更して下さい。

あとは数字を変える事で以下の数を変更する事が出来ます。

  • 初期表示の数
  • もっと見るボタンで表示する数
  • 閉じた後の表示数

試しに以下の条件で実装してみたいと思います。

  • 初期表示は6件
  • もっと見るボタンクリックで4件ずつ表示
  • 閉じるボタンクリックで5件表示

そしてこちらがサンプルになります。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

以上になります。

あわせて読む
【jQuery】続きを読むボタンクリックで要素を開く方法【閉じるボタンあり】
【jQuery】続きを読むボタンクリックで要素を開く方法【閉じるボタンあり】

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
740部以上販売し、レビューは410件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高9万PV▶︎Twitterのフォロワーは6300人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計750部&450万円突破

-Web制作, jQuery