リストの一定数以上を非表示にして、画像のボタンを押すことで表示させたい

前提・実現したいこと

jQueryを使用し、リストの一定数(7件)以上、または兄弟要素のリストを初期状態で非表示にし、それぞれボタンを押すことで全てのリストを表示させることが目標です。
開閉用のボタンをopenとcloseの2つの画像を用意し、ボタンをクリックしたとき画像名を置換して、画像を変更する仕様です。

発生している問題・エラーメッセージ

画像のボタンをクリックしたときに画像が切り替わり、非表示の要素は表示されるが、クリックしていない兄弟要素まですべて表示されてしまう
クリックしたボタンに付随するリストだけ表示・非表示を切り替えるようにしたいです。

該当のソースコード

HTML
1<div class="pickup_itemList">
2<!-- Aセット 1-12 -->
3  <div class="pickup_itemList_Inner">
4       <div class="pickup_itemBox">
5        <figure>
6         <img src="https://placehold.jp/230x310.png">
7           <div class="itemTitle">
8            <figcaption>Aセット1</figcaption>
9             <p>ハンバーガー,ドリンク</p>
10           </div>
11          </figure>
12         </div>
13       <div class="pickup_itemBox">
14        <figure>
15         <img src="https://placehold.jp/230x310.png">
16           <div class="itemTitle">
17            <figcaption>Aセット2</figcaption>
18             <p>ハンバーガー,ドリンク</p>
19           </div>
20          </figure>
21         </div>
22       <div class="pickup_itemBox">
23        <figure>
24         <img src="https://placehold.jp/230x310.png">
25           <div class="itemTitle">
26            <figcaption>Aセット3</figcaption>
27             <p>ハンバーガー,ドリンク</p>
28           </div>
29          </figure>
30         </div>
31       <div class="pickup_itemBox">
32        <figure>
33         <img src="https://placehold.jp/230x310.png">
34           <div class="itemTitle">
35            <figcaption>Aセット4</figcaption>
36             <p>ハンバーガー,ドリンク</p>
37           </div>
38          </figure>
39         </div>
40       <div class="pickup_itemBox">
41        <figure>
42         <img src="https://placehold.jp/230x310.png">
43           <div class="itemTitle">
44            <figcaption>Aセット5</figcaption>
45             <p>ハンバーガー,ドリンク</p>
46           </div>
47          </figure>
48         </div>
49       <div class="pickup_itemBox">
50        <figure>
51         <img src="https://placehold.jp/230x310.png">
52           <div class="itemTitle">
53            <figcaption>Aセット6</figcaption>
54             <p>ハンバーガー,ドリンク</p>
55           </div>
56          </figure>
57         </div>
58       <div class="pickup_itemBox">
59        <figure>
60         <img src="https://placehold.jp/230x310.png">
61           <div class="itemTitle">
62            <figcaption>Aセット7</figcaption>
63             <p>ハンバーガー,ドリンク</p>
64           </div>
65          </figure>
66  </div>
67
68 <div class="pickup_secret_cont">
69  <!-- Bセット 1-6 -->
70  <div class="pickup_itemList_Inner">      
71       <div class="pickup_itemBox">
72        <figure>
73         <img src="https://placehold.jp/230x310.png">
74           <div class="itemTitle">
75            <figcaption>Bセット1</figcaption>
76             <p>ハンバーガー,ドリンク</p>
77           </div>
78          </figure>
79         </div>
80       <div class="pickup_itemBox">
81        <figure>
82         <img src="https://placehold.jp/230x310.png">
83           <div class="itemTitle">
84            <figcaption>Bセット2</figcaption>
85             <p>ハンバーガー,ドリンク</p>
86           </div>
87          </figure>
88         </div>
89       <div class="pickup_itemBox">
90        <figure>
91         <img src="https://placehold.jp/230x310.png">
92           <div class="itemTitle">
93            <figcaption>Bセット3</figcaption>
94             <p>ハンバーガー,ドリンク</p>
95           </div>
96          </figure>
97         </div>
98       <div class="pickup_itemBox">
99        <figure>
100         <img src="https://placehold.jp/230x310.png">
101           <div class="itemTitle">
102            <figcaption>Bセット4</figcaption>
103             <p>ハンバーガー,ドリンク</p>
104           </div>
105          </figure>
106         </div>
107       <div class="pickup_itemBox">
108        <figure>
109         <img src="https://placehold.jp/230x310.png">
110           <div class="itemTitle">
111            <figcaption>Bセット5</figcaption>
112             <p>ハンバーガー,ドリンク</p>
113           </div>
114          </figure>
115         </div>
116       <div class="pickup_itemBox">
117        <figure>
118         <img src="https://placehold.jp/230x310.png">
119           <div class="itemTitle">
120            <figcaption>Bセット6</figcaption>
121             <p>ハンバーガー,ドリンク</p>
122           </div>
123          </figure>
124         </div>
125   </div>
126  </div>
127  <p class="button">
128    <img src="button_01.png" alt="ボタン">
129  </p>
130</div>
131
132<div class="pickup_itemList">
133<!-- 限定メニュー 1-12 -->
134  <div class="pickup_itemList_Inner">
135       <div class="pickup_itemBox">
136        <figure>
137         <img src="https://placehold.jp/230x310.png">
138           <div class="itemTitle">
139            <figcaption>限定メニュー1</figcaption>
140             <p>ハンバーガー,ドリンク</p>
141           </div>
142          </figure>
143         </div>
144       <div class="pickup_itemBox">
145        <figure>
146         <img src="https://placehold.jp/230x310.png">
147           <div class="itemTitle">
148            <figcaption>限定メニュー2</figcaption>
149             <p>ハンバーガー,ドリンク</p>
150           </div>
151          </figure>
152         </div>
153       <div class="pickup_itemBox">
154        <figure>
155         <img src="https://placehold.jp/230x310.png">
156           <div class="itemTitle">
157            <figcaption>限定メニュー3</figcaption>
158             <p>ハンバーガー,ドリンク</p>
159           </div>
160          </figure>
161         </div>
162       <div class="pickup_itemBox">
163        <figure>
164         <img src="https://placehold.jp/230x310.png">
165           <div class="itemTitle">
166            <figcaption>限定メニュー4</figcaption>
167             <p>ハンバーガー,ドリンク</p>
168           </div>
169          </figure>
170         </div>
171       <div class="pickup_itemBox">
172        <figure>
173         <img src="https://placehold.jp/230x310.png">
174           <div class="itemTitle">
175            <figcaption>限定メニュー5</figcaption>
176             <p>ハンバーガー,ドリンク</p>
177           </div>
178          </figure>
179         </div>
180       <div class="pickup_itemBox">
181        <figure>
182         <img src="https://placehold.jp/230x310.png">
183           <div class="itemTitle">
184            <figcaption>限定メニュー6</figcaption>
185             <p>ハンバーガー,ドリンク</p>
186           </div>
187          </figure>
188         </div>
189　</div>
190 <div class="pickup_secret_cont">
191   <div class="pickup_itemList_Inner">
192       <div class="pickup_itemBox">
193        <figure>
194         <img src="https://placehold.jp/230x310.png">
195           <div class="itemTitle">
196            <figcaption>限定メニュー7</figcaption>
197             <p>ハンバーガー,ドリンク</p>
198           </div>
199          </figure>
200         </div>
201       <div class="pickup_itemBox">
202        <figure>
203         <img src="https://placehold.jp/230x310.png">
204           <div class="itemTitle">
205            <figcaption>限定メニュー8</figcaption>
206             <p>ハンバーガー,ドリンク</p>
207           </div>
208          </figure>
209         </div>
210       <div class="pickup_itemBox">
211        <figure>
212         <img src="https://placehold.jp/230x310.png">
213           <div class="itemTitle">
214            <figcaption>限定メニュー9</figcaption>
215             <p>ハンバーガー,ドリンク</p>
216           </div>
217          </figure>
218         </div>
219       <div class="pickup_itemBox">
220        <figure>
221         <img src="https://placehold.jp/230x310.png">
222           <div class="itemTitle">
223            <figcaption>限定メニュー10</figcaption>
224             <p>ハンバーガー,ドリンク</p>
225           </div>
226          </figure>
227         </div>
228  　</div>
229  </div>
230  <p class="button">
231    <img src="button_01.png" alt="ボタン">
232  </p>
233
234</div>

CSS
1#pickup_item .pickup_itemList {
2  width: 100%;
3  max-width: 100%;
4  margin: 8% auto;
5}
6
7#pickup_item .pickup_itemList .button {
8  text-align: center;
9  background: none;
10  border: none;
11}
12
13#pickup_item .pickup_itemList .pickup_itemList_Inner {
14  margin: 5% auto;
15  display: grid;
16  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
17  place-items: center;
18}
19
20#pickup_item .pickup_itemList .pickup_itemList_Inner .pickup_itemBox {
21  margin: 0 0 10%;
22  display: flex;
23  flex-direction: column;
24}
25
26#pickup_item .pickup_itemList .pickup_itemList_Inner .pickup_itemBox figure {
27  margin: 0;
28}
29
30#pickup_item .pickup_itemList .pickup_itemList_Inner .pickup_itemBox .itemTitle {
31  font-size: 2rem;
32  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
33  font-weight: normal;
34  color: #757575;
35  line-height: 2;
36  margin: 0;
37}
38
39#pickup_item .pickup_itemList .pickup_itemList_Inner .pickup_itemBox .itemTitle p {
40  font-size: 1.8rem;
41  line-height: 1;
42  margin: 1% 0;
43}

JavaScript
1$(function() {
2      var hideList = '.pickup_itemList_Inner .pickup_itemBox:nth-of-type(n+7)';
3      var hideList2 = '.pickup_secret_cont';
4      $(hideList).hide();
5      $(hideList2).hide();
6      $('.button').click(function() {
7        $(hideList).toggle();
8        $(hideList2).toggle();
9        if ($(hideList).css('display') == 'none') {
10          $('.button img').attr("src", $('.button img').attr("src").replace("02", "01"));
11        } else {
12          $('.button img').attr("src", $('.button img').attr("src").replace("01", "02"));
13        }
14        return false;
15      });
16
17      var num = $('.pickup_itemList_Inner').children('.pickup_itemBox').length;
18      if (num < 6) {
19        $('.button').hide();
20      };
21    });

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

回答1件

AセットとBセットの相関関係がわからないのでなんとも言えませんが

javascript
1<script>
2$(function(){
3  $('.btn').on('click',function(){
4    $(this).text($(this).text()=='open'?'close':'open');
5    $('.pickup_itemBox:gt(2)').toggle();
6  }).trigger('click');
7});
8</script>
9<div class="pickup_itemList_Inner">
10<div class="pickup_itemBox">test1</div>
11<div class="pickup_itemBox">test2</div>
12<div class="pickup_itemBox">test3</div>
13<div class="pickup_itemBox">test4</div>
14<div class="pickup_itemBox">test5</div>
15<div class="pickup_itemBox">test6</div>
16<div class="pickup_itemBox">test7</div>
17<div class="pickup_itemBox">test8</div>
18</div>
19<p class="btn">close</p>

投稿2021/05/18 04:56

yambejp

総合スコア116724

onakapecomaru

2021/05/18 05:24

ありがとうございます。素人のため説明不足で申し訳ございません。 AセットとBセットは同じグループで、限定メニューのみ別のグループ初期はAの6件まで、限定メニューの6件までを表示したいです。 Aの下にあるopenのボタンを押すとAの7件目以降、またその下にBの1件目から1-6が表示されるという風にしたいです。また、同じく限定の下にあるopenのボタンを押すと、限定の7件目以降が表示されるようにしたいと考えております。こちらを参考にさせて頂きますと、最初からすべて表示されておりopenの文字をクリックすると、7件目以降が非表示になってしまいまして... 拙い説明ではありますが、お知恵をお借りできれば幸いです。

yambejp

2021/05/18 05:35

AとBはそれぞれ独立してopen/closeするということでしょうか？ <script> $(function(){ $('.btn').on('click',function(){ $(this).text($(this).text()=='open'?'close':'open'); $(this).closest('.pickup_itemList_Inner').find('.pickup_itemBox:gt(6)').toggle(); }).trigger('click'); }); </script> <div class="pickup_itemList_Inner"> <div class="pickup_itemBox">test1</div> <div class="pickup_itemBox">test2</div> <div class="pickup_itemBox">test3</div> <div class="pickup_itemBox">test4</div> <div class="pickup_itemBox">test5</div> <div class="pickup_itemBox">test6</div> <div class="pickup_itemBox">test7</div> <div class="pickup_itemBox">test8</div> <p class="btn">close</p> </div> <div class="pickup_itemList_Inner"> <div class="pickup_itemBox">test1</div> <div class="pickup_itemBox">test2</div> <div class="pickup_itemBox">test3</div> <div class="pickup_itemBox">test4</div> <div class="pickup_itemBox">test5</div> <div class="pickup_itemBox">test6</div> <div class="pickup_itemBox">test7</div> <div class="pickup_itemBox">test8</div> <p class="btn">close</p> </div>

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