回答編集履歴

2

追記

2017/10/12 01:41

投稿

yambejp
yambejp

スコア116644

test CHANGED
@@ -20,6 +20,12 @@
20
20
 
21
21
  $('.btn span:nth-child(2)').addClass('hide');
22
22
 
23
+ /* 追記:5件以下の場合は、もっと見るボタンを非表示*/
24
+
25
+ $('.box .list:not(:has(li:nth-child(6)))').next('.btn').find('span').addClass('hide');
26
+
27
+
28
+
23
29
  $('.btn').on('click',function(){
24
30
 
25
31
  $(this).closest('.box').toggleClass('hide');

1

追記

2017/10/12 01:41

投稿

yambejp
yambejp

スコア116644

test CHANGED
@@ -109,3 +109,103 @@
109
109
 
110
110
 
111
111
  ```
112
+
113
+
114
+
115
+ # 追記
116
+
117
+ idを付けたチェックボックスをスイッチにしていいならjavascriptもいりません
118
+
119
+ ```CSS
120
+
121
+ input.switch{position:absolute;top:-9999px;}
122
+
123
+ input:checked+.box li:nth-child(n+6){display:none;}
124
+
125
+ .box label span:nth-child(1){display:none;}
126
+
127
+ input:checked+.box label span:nth-child(1){display:inline;}
128
+
129
+ input:checked+.box label span:nth-child(2){display:none;}
130
+
131
+ ```
132
+
133
+ ```HTML
134
+
135
+ <input type="checkbox" id="dsp1" checked class="switch">
136
+
137
+ <div class="box">
138
+
139
+ <ul class="list">
140
+
141
+ <li>1件目の記事</li>
142
+
143
+ <li>2件目の記事</li>
144
+
145
+ <li>3件目の記事</li>
146
+
147
+ <li>4件目の記事</li>
148
+
149
+ <li>5件目の記事</li>
150
+
151
+ <li>6件目の記事</li>
152
+
153
+ <li>7件目の記事</li>
154
+
155
+ <li>8件目の記事</li>
156
+
157
+ <li>9件目の記事</li>
158
+
159
+ <li>10件目の記事</li>
160
+
161
+ </ul>
162
+
163
+ <label for="dsp1">
164
+
165
+ <span>もっと見る</span>
166
+
167
+ <span>閉じる</span>
168
+
169
+ </label>
170
+
171
+ </div>
172
+
173
+ <input type="checkbox" id="dsp2" checked class="switch">
174
+
175
+ <div class="box">
176
+
177
+ <ul class="list">
178
+
179
+ <li>1件目の記事</li>
180
+
181
+ <li>2件目の記事</li>
182
+
183
+ <li>3件目の記事</li>
184
+
185
+ <li>4件目の記事</li>
186
+
187
+ <li>5件目の記事</li>
188
+
189
+ <li>6件目の記事</li>
190
+
191
+ <li>7件目の記事</li>
192
+
193
+ <li>8件目の記事</li>
194
+
195
+ <li>9件目の記事</li>
196
+
197
+ <li>10件目の記事</li>
198
+
199
+ </ul>
200
+
201
+ <label for="dsp2">
202
+
203
+ <span>もっと見る</span>
204
+
205
+ <span>閉じる</span>
206
+
207
+ </label>
208
+
209
+ </div>
210
+
211
+ ```