もっと見るでクリックしたら３つずつ表示するを複数設置したい。

こんにちは。
何日も悩んでしまい解決できないため、教えていただきたいです。

ボタンを押したら残りを表示するというのを三箇所で実施したいです。
以下のサイトを参考にしました。
https://codepen.io/m_t_of/pen/YaROLY

上の二つは問題なく表示されるのですが、
最後のが、ボタンが表示されず困っています。

どうすればよろしいでしょうか？

ご教授いただけましたら幸いです。

html
1<ul class="list_toggle">
2  <li>1</li>
3  <li>2</li>
4  <li>3</li>
5  <li>4</li>
6  <li>5</li>
7  <li>6</li>
8  <li>7</li>
9  <li>8</li>
10  <li>9</li>
11  <li>10</li>
12</ul>
13
14<button class="btn moremore">view more ></button>
15<ul class="colum_toggle">
16  <li>1</li>
17  <li>2</li>
18  <li>3</li>
19  <li>4</li>
20  <li>5</li>
21  <li>6</li>
22  <li>7</li>
23  <li>8</li>
24  <li>9</li>
25  <li>10</li>
26</ul>
27
28<button class="btn colummore">view more ></button>
29
30<ul class="part_toggle">
31  <li>1</li>
32  <li>2</li>
33  <li>3</li>
34  <li>4</li>
35  <li>5</li>
36  <li>6</li>
37  <li>7</li>
38  <li>8</li>
39  <li>9</li>
40  <li>10</li>
41</ul>
42
43<button class="btn partmore">view more ></button>
44
45

css
1.is-hidden {
2  display: none;
3}

js
1 var item = $('.list_toggle').children('li');
2  var listbtn = $('.moremore');
3  var className = "is-hidden";
4
5  var itemsList = function () {
6    //表示されているliの個数を取得
7    var items = $(item).filter(':visible').length;
8
9    //ボタンの表示・非表示
10    if (items > 6) { //リストが2個より多い時
11      $(listbtn).show();
12    } else { //リストが2個未満の時
13      $(listbtn).hide();
14    }
15
16    //リスト2個までを表示
17    (function () {
18      var addCount = 0;
19
20      $(item).each(function () {
21        if (addCount === 3) {
22          $(this).addClass(className);
23          return;
24        }
25        if (!$(this).hasClass(className)) {
26          addCount++;
27        }
28      });
29    }());
30  };
31
32  itemsList();
33
34  //もっと見るボタンをクリックで2個ずつ表示
35  (function () {
36    $(listbtn).on('click', function () {
37      var hiddenLength = $('.list_toggle').children('li.is-hidden').length; //非表示のリスト数
38
39      if (hiddenLength === 0) {
40        return; //非表示のものが無ければ何もしない
41      }
42
43      var moreCount = 0;
44      $('.list_toggle').children('li.is-hidden').each(function () {
45        if (moreCount === 3) {
46          return; //３個ずつ表示（３個まで表示したら処理をやめる）
47        }
48
49        if ($(this).hasClass(className)) {
50          var hiddenLength = $('.list_toggle').children('li.is-hidden').length; //非表示のリスト数
51          $(this).removeClass(className);
52          moreCount++;
53        }
54
55        //全部表示したらボタン削除
56        if (hiddenLength === 1) {
57          $(listbtn).hide();
58        }
59      });
60    });
61  }());
62		 var item = $('.colum_toggle').children('li');
63  var colum_btn = $('.colummore');
64  var className = "is-hidden";
65
66  var itemsList = function () {
67    //表示されているliの個数を取得
68    var items = $(item).filter(':visible').length;
69
70    //ボタンの表示・非表示
71    if (items > 6) { //リストが2個より多い時
72      $(colum_btn).show();
73    } else { //リストが３個未満の時
74      $(colum_btn).hide();
75    }
76
77    //リスト2個までを表示
78    (function () {
79      var addCount = 0;
80
81      $(item).each(function () {
82        if (addCount === 3) {
83          $(this).addClass(className);
84          return;
85        }
86        if (!$(this).hasClass(className)) {
87          addCount++;
88        }
89      });
90    }());
91  };
92
93  itemsList();
94
95  //もっと見るボタンをクリックで2個ずつ表示
96  (function () {
97    $(colum_btn).on('click', function () {
98      var hiddenLength = $('.colum_toggle').children('li.is-hidden').length; //非表示のリスト数
99
100      if (hiddenLength === 0) {
101        return; //非表示のものが無ければ何もしない
102      }
103
104      var moreCount = 0;
105      $('.colum_toggle').children('li.is-hidden').each(function () {
106        if (moreCount === 3) {
107          return; //３個ずつ表示（３個まで表示したら処理をやめる）
108        }
109
110        if ($(this).hasClass(className)) {
111          var hiddenLength = $('.colum_toggle').children('li.is-hidden').length; //非表示のリスト数
112          $(this).removeClass(className);
113          moreCount++;
114        }
115
116        //全部表示したらボタン削除
117        if (hiddenLength === 1) {
118          $(colum_btn).hide();
119        }
120      });
121    });
122  }());
123	
124	
125	var item = $('.part_toggle').children('li');
126  var partbtn = $('.partmore');
127  var className = "is-hidden";
128
129
130  var itemsList = function () {
131    //表示されているliの個数を取得
132    var items = $(item).filter(':visible').length;
133
134    //ボタンの表示・非表示
135    if (items > 6) { //リストが2個より多い時
136      $(partbtn).show();
137    } else { //リストが３個未満の時
138      $(partbtn).hide();
139    }
140
141    //リスト2個までを表示
142    (function () {
143      var addCount = 0;
144
145      $(item).each(function () {
146        if (addCount === 3) {
147          $(this).addClass(className);
148          return;
149        }
150        if (!$(this).hasClass(className)) {
151          addCount++;
152        }
153      });
154    }());
155  };
156
157  itemsList();
158
159  //もっと見るボタンをクリックで2個ずつ表示
160  (function () {
161    $(partbtn).on('click', function () {
162      var hiddenLength = $('.part_toggle').children('li.is-hidden').length; //非表示のリスト数
163
164      if (hiddenLength === 0) {
165        return; //非表示のものが無ければ何もしない
166      }
167
168      var moreCount = 0;
169      $('.part_toggle').children('li.is-hidden').each(function () {
170        if (moreCount === 3) {
171          return; //3個ずつ表示（3個まで表示したら処理をやめる）
172        }
173
174        if ($(this).hasClass(className)) {
175          var hiddenLength = $('.part_toggle').children('li.is-hidden').length; //非表示のリスト数
176          $(this).removeClass(className);
177          moreCount++;
178        }
179
180        //全部表示したらボタン削除
181        if (hiddenLength === 1) {
182          $(partbtn).hide();
183        }
184      });
185    });
186

m.ts10806

2020/10/11 06:45

「JavaScript」も質問タグに追加してください。コードからすると「jQuery」もあったほうが良いかもしれません。「HTML」だけだとアドバイスは得られにくくなります。あと、CSSも提示されたほうが良さそうです。

sugarsugar

2020/10/11 09:33

見ていただきありがとうございます。また、アドバイスありがとうございます。修正いたしました。

m.ts10806

2020/10/11 09:49

修正が反映されていないようです。 teratail側のバグでたまに更新できてないときがあります。投稿後、念のため内容ご確認ください。

sugarsugar

2020/10/11 09:58

何度もすみません。修正しました。ありがとうございます！

行動規範の内容に同意します

回答2件

ベストアンサー

参考にされているソースは、無駄に即時実行関数を記述しており、可読性を損なっているように感じます。

変更した属性/属性値に合わせて、コード内のセレクタも変更します。
「２個ずつ」を「３個ずつ」に変更したことで、クリックイベントリスナ内の演算が変わります。
同一のマークアップ構造に対する処理は、ユーザ関数を構築してみます（jQuery プラグインの理解に通じます）。

クリックイベントリスナ内の演算を変えていない（バグあり）の例です

CODEPEN : jQuery「もっと見るボタン」

投稿2020/10/11 22:31

編集2020/10/11 22:36

AkitoshiManabe

総合スコア5434

sugarsugar

2020/10/12 06:16

akitoshimanabeさまありがとうございます。無事表示されました。コピペで無駄なソースを整えてくださりありがとうございます。これを機にちゃんと勉強をしてみます。本当にありがとうございました！

行動規範の内容に同意します

質問者様すみません。初期の質問から内容追加されたのですね。
以前の状態での回答となりますので参考程度にして下さい。

css
1		label, li{
2			display:block;
3		}
4		input[type="checkbox"]{
5			display:none;
6		}
7		label[for="list_toggle"]{
8			display:block;
9		}
10		label[for="colum_toggle"]{
11			display:block;
12		}
13		label[for="part_toggle"]{
14			display:block;
15		}
16
17

javascript
1		function dropdown(el){
2			let classname = '';
3			if(el.id == 'list_toggle') classname = 'dropdown1';
4			if(el.id == 'colum_toggle') classname = 'dropdown2';
5			if(el.id == 'part_toggle') classname = 'dropdown3';
6			document.getElementsByClassName(classname)[0].style.display = el.checked ? '': 'none';
7		}
8

HTML
1<html>
2<head>
3    <meta charset="UTF-8">
4</head>
5
6<body>
7
8<ul class="dropdown1">
9  <li>1</li>
10  <li>2</li>
11  <li>3</li>
12  <li>4</li>
13  <li>5</li>
14  <li>6</li>
15  <li>7</li>
16  <li>8</li>
17  <li>9</li>
18  <li>10</li>
19</ul>
20<input type="checkbox" id="list_toggle" onclick="dropdown(this);">
21<label for="list_toggle">view more ></label>
22
23<ul class="dropdown2">
24  <li>1</li>
25  <li>2</li>
26  <li>3</li>
27  <li>4</li>
28  <li>5</li>
29  <li>6</li>
30  <li>7</li>
31  <li>8</li>
32  <li>9</li>
33  <li>10</li>
34</ul>
35<input type="checkbox" id="colum_toggle" onclick="dropdown(this);">
36<label for="colum_toggle">view more ></label>
37
38<ul class="dropdown3">
39  <li>1</li>
40  <li>2</li>
41  <li>3</li>
42  <li>4</li>
43  <li>5</li>
44  <li>6</li>
45  <li>7</li>
46  <li>8</li>
47  <li>9</li>
48  <li>10</li>
49</ul>
50<input type="checkbox" id="part_toggle" onclick="dropdown(this);">
51<label for="part_toggle">view more ></label>
52
53
54</body>
55</html>