jQuery Web制作 コーディング

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

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

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

今回は以下のように出来るようにしたいと思います。

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

効率よくコーディングしたい人はこちら

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

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

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

【初めて使う人向け】jQuery本体を読み込む方法

 

まずは冒頭で書いたような状態になるように書いたデモをご覧ください。

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.

以上になります。

 

コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約280件(平均スコア

今だけ!5大特典あり🎁

-jQuery, Web制作, コーディング