シンプルな「もっと見る」ボタンの実装【jQuery】

2022/04/24コーディング

要件としては、

• Ajaxとかじゃなくて、データは全件取得してあり、n件ずつ表示していくパターンね。
• jQueryで実装
• 実装したい場所は複数あるぜ

ということで、ベースとさせていただいたのは@auko55736370さんの以下の記事のコードです。
まずは挙動を参照してください。
n件ずつ表示する「もっと見る」ボタンのシンプル実装

これを、サイト上の複数箇所で別個に設置できるように関数化しようということですね。
設置場所のIDやクラスと、一度に表示する件数nの二つの引数を取るようにしましょう。

あと、初期状態で全件数 < n の場合には「もっと見る」ボタンが表示されないようにしたりします。

ということで、作り込みは甘いのですが、一応、案件での使用に耐える最低限は満たしてる感。

See the Pen
Untitled by yngdrsk (@yngdrsk)
on CodePen.

Codepen見れない人は以下参考に。

HTML

<div class="wrap">
  <ul id="SAMPLE" class="sample-list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
    <li>item11</li>
    <li>item12</li>
  </ul>
  <div class="more">
      <button>もっと見る</button>
  </div>
</div>

CSS（Sass）

.sample-list {
  list-style: none;
  li {
    width: 100%;
    height: 36px;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin-bottom: 10px;
    line-height: 36px;
    text-align: center;
    transition: .6s;
    &.is-hidden {
      opacity: 0;
      height: 0;
      margin: 0;
    }
  }
}

.more {
  position: relative;
  z-index: 10;
  margin: 30px 0;
  width: 100%;
  display: none;
  button {
    width: 100%;
    height: 36px;
    background-color: #888;
    border: 1px solid #bbb;
    color: #fff;
    cursor: pointer;
    outline: none;
    line-height: 32px;
    text-align: center;
  }
}

jQuery

jQuery(function ($) {

      function showMore( target, num ) {
        $( target + ' li:nth-child(n + ' + ( num + 1) + ')').addClass('is-hidden');
        if ($(target + ' li.is-hidden').length > 0) {
            $(target + '+.more').fadeIn();
        }
        $( target + '+.more').on('click', function (e) {
            e.preventDefault();
            $( target + ' li.is-hidden').slice(0, num).removeClass('is-hidden');
            if ($( target + ' li.is-hidden').length == 0) {
                $(target + '+.more').fadeOut();
            }
        });
    }

  showMore( "#SAMPLE", 5); // ここで実行ね。複数設置できて、n件の件数も自由なり。
});

とまあこんな感じ。

• とりまul縛りなので、divとかで実装したい場合は適当にコード改変して使ってください。
• あと注意するとすれば、「もっと見る」ボタンは隣接セレクタ（+）で拾っているので、閉じタグ</ul>の直後にボタンを設置するってことぐらいかな。
• ボタンはこのサンプルではbuttonタグで実装してるけど、一応preventDefaultかましてあるのでaタグでも大丈夫です。

ま、そんな感じでテキトーですがシンプルだし便利なので使いまわしていこうと思います。