【jQuery】リストの一定数以上を非表示にして、ボタンを押すことで表示させる方法

2020-01-052020-09-12

jQueryを使用した、「リストの一定数以上を初期状態で非表示にし、ボタンを押すことで全てのリストを表示させる方法」について、記載していきます。

1. 本記事で説明する機能について
2. 使用するケース
3. サンプル
4. 方法

本記事で説明する機能について

下記機能について、実装方法を説明していきます。

・あるリスト内の一部を初期状態で表示し、残りを非表示にする
・ボタンを設け、ボタンを押すことで残りの非表示だったリストが表示される
・ボタンを再度押すことで、初期状態に戻る
・記事の数が一定の件数に満たなかった場合、ボタンは表示されない

使用するケース

ブログ入りサイトの「新着記事」の項目であったり、商品やサービスを扱うサイトの「お客様の声」でしばしば使われます。

数個ほど例としてリストの一部を表示しておき、利用者がもっと見たいと思った場合には「もっと見る」などのテキスト入りボタンをクリックすることで簡単に見ることができます。

初期で表示させるリストは数個なので、目に入る情報量も少なくて済みます。

サンプル

リンク

方法

「jQuery」を使用して実装を行いますので、「body」の最後に下記の通りjQueryの読み込み用コードを追記します。
※ダウンロードしたものを使用してもOKです

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

リスト部分は「ul」に「title-list」のクラスを付け、その下に「もっと見る」のテキストボタンを設置しています。
※css部分は機能には影響ないため省略します

リスト4つめ「ハムスターが・・・」以下のリストを初期状態では非表示にしていきます。

<ul class="title-list">
　　<li>猿がとても楽しそうにこちらを見ています</li>
　　<li>犬がしっぽを沢山ふっています</li>
　　<li>猫が回転しながら昼寝をしています</li>
　　<li>ハムスターがとてもかわいい</li>
　　<li>ミジンコが呼吸しています</li>
　　<li>ティラノサウルスがとても獰猛です</li>
　　<li>人間は考える葦です</li>
　　<li>鳥が空を飛んでいます</li>
　　<li>ダンゴムシが動いています</li>
　　<li>地球は生きています</li>
</ul>
<p><a href="#" class="open-btn">もっと見る</a></p>

そしてjQueryです。

$(function() {
      var hideList = '.title-list li:nth-of-type(n+4)';
      $(hideList).hide();
      $('.open-btn').click(function() {
        $(hideList).toggle();
        if ($(hideList).css('display') == 'none') {
          $('.open-btn').text('もっと見る');
        } else {
          $('.open-btn').text('閉じる');
        }
        return false;
      });

      var num = $('.title-list').children('li').length;
      if (num < 4) {
        $('.open-btn').hide();
      };
    });

var hideList = '.title-list li:nth-of-type(n+4)’;
によって、リスト4つめ以降をを表すセレクタの記述を「hideList」という変数に入れています。

$(hideList).hide();
によって、リスト4つめ以降を初期状態で非表示にしています。

$('.open-btn’).click(function() {~
については、「open-btn」をクリックした際に括弧内の処理を行う記述となります。

$(hideList).toggle();
について、「hideList」の表示・非表示を切り替える命令となります。
「 $('.open-btn’).click(function() {~ 」の中に記述しているので、「open-btn」をクリックした際に表示・非表示の命令が実行されます。

if ($(hideList).css('display’) == 'none’) {
$('.open-btn’).text('もっと見る’);
} else {
$('.open-btn’).text('閉じる’);
}
の部分では、ボタンテキストの内容変更を設定しています。
「hideList」の「display」プロパティが「none」だった場合（＝リスト4つめ以降が非表示だった場合）に、ボタンのテキストを「もっと見る」に、そうでない場合（＝リスト4つめ以降がすでに表示されている場合）には「閉じる」に変更する内容です。
これもボタンクリック時に判定が行われています。

return false;
については、今回ボタンをaタグでマークアップしましたが、ボタン押下してjQueryの処理が終わった後にurlが変わらないようにこちらを記述しています。

記事の表示・非表示の処理はここまでとなります。
ここから、記事数によるボタンの表示・非表示の処理を説明します。

var num = $('.title-list’).children('li’).length;
まず上記の記述で、「 title-list 」のクラスがついている「ul」の子要素である「li」の数を「num」という変数に入れています。
「$('.title-list’).children('li’)」の部分は、該当の「li」を指定できれば別の書き方でも問題ありません。

if (num < 4) {
$('.open-btn’).hide();
};
こちらの記述で、もし該当のliの個数が4未満であれば、ボタンを非表示にすることができます。
※「4」の部分は適宜変更してください。

以上となります。

Web制作,jQuery