https://global.canon/01cmn/isfw/isfw_assets/js/more_show_script_4.js

1$(function() {
2  var pcWidth = $(window).width();
3  //ブレークポイント設定 px
4  var spWidth = 736;
5
6  // 表示させる要素の総数をlengthメソッドで取得
7  var $numberListLen = $("#number_list li").length;
8  // デフォルトの表示数
9  var defaultNum = 3;
10  // ボタンクリックで追加表示させる数
11  var addNum = 7;
12  // 現在の表示数
13  var currentNum = 0;
14
15  if (pcWidth <= spWidth) {
16    $("#number_list").each(function() {
17      // moreボタンを表示し、closeボタンを隠す
18      $(this).find("#more_btn").show();
19      $(this).find("#close_btn").hide();
20
21      // defaultNumの数だけ要素を表示
22      // defaultNumよりインデックスが大きい要素は隠す
23      $(this).find("li:not(:lt("+defaultNum+"))").hide();
24
25      // 初期表示ではデフォルト値が現在の表示数となる
26      currentNum = defaultNum;
27
28      // moreボタンがクリックされた時の処理
29      $("#more_btn").click(function() {
30        // 現在の表示数に追加表示数を加えていく
31        currentNum += addNum;
32
33        // 現在の表示数に追加表示数を加えた数の要素を表示する
34        $(this).parent().find("li:lt("+currentNum+")").slideDown();
35
36        // 表示数の総数よりcurrentNumが多い=全て表示された時の処理
37        if($numberListLen <= currentNum) {
38          // 現在の表示数をデフォルト表示数へ戻す
39          currentNum = defaultNum;
40          // インデックス用の値をセット
41          indexNum = currentNum - 1;
42
43          // moreボタンを隠し、closeボタンを表示する
44          $("#more_btn").hide();
45          $("#close_btn").show();
46
47          // closeボタンがクリックされた時の処理
48          $("#close_btn").click(function() {
49            // デフォルト数以降=インデックスがindexNumより多い要素は非表示にする
50            $(this).parent().find("li:gt("+indexNum+")").slideUp();
51
52            // closeボタンを隠し、moreボタンを表示する
53            $(this).hide();
54            $("#more_btn").show();
55          });
56        }
57      });
58    });
59  } else {
60    $("#more_btn").hide();
61    $("#close_btn").hide();
62  }
63});