アコーディオンで開いたり閉じたりしたいと思い
下記のサイトを参考に実装したのですがアコーディオンを閉じる事が出来ないです。
https://www.weblab.co.jp/blog/creator/11465.html
やったこと
自分なりにコードを改造して、
if (h_tag.length == 0) {}
を追加し2度目ボタンを押したときに
一番最初に動作するコードを
もう一度走らせれば動くのでは?と思い
コピペして、入れてみたのですが動作せず
自分なりに検証してみた
ifの途中にconsole.log(h_tag.length);を入れてみた
if自体は判定が成功していて
ifの直下にconsole.log(h_tag.length);のコードを置いていて
0がログに表示されていたので、動作していることは間違いないと思う。
知りたい事
何処が悪くて動かないのか?知りたい
以下コード
js
1//アコーディオン 2$(function() { 3 var num = 21; //何個づつ開くか指定 4 var d_num = 6; //最初表示させたい個数を指定 5 $('.accordion_box').each(function() { //.accordion_boxを検索 6 $('.accordion1 span.wpcf7-list-item:gt(' + (d_num - 1) + ')', this).addClass('none'); //d_numより後の要素は.none付与 7 if ($('.accordion1 span.wpcf7-list-item', this).length > d_num) { 8 $('.trigger', this).show(); //d_numより要素の数が多ければ「もっとみる」ボタン表示 9 } 10 }); 11 $('.accordion_box .accordion_btn.trigger').on('click', function() { 12 var h_tag = $(this).parents('.accordion_box').find('.accordion1 span.wpcf7-list-item.none'); //クリックしたボタンに関連する.accordionの非表示要素を取得 13 if (h_tag.length == 0) { 14 //0なら開いた後なので、初期状態に戻す 15 $('.accordion_box').each(function() { //.accordion_boxを検索 16 $('.accordion1 span.wpcf7-list-item:gt(' + (d_num - 1) + ')', this).addClass('none'); //d_numより後の要素は.none付与 17 if ($('.accordion1 span.wpcf7-list-item', this).length > d_num) { 18 $('.trigger', this).show(); //d_numより要素の数が多ければ「もっとみる」ボタン表示 19 } 20 }); 21 } else { 22 h_tag.slice(0, num).slideDown('fast').toggleClass('none'); //num個までの非表示要素を開いて.noneを外す 23 } 24 }); 25 26});
表示しているHTML
HTML
1<div class="accordion_box"> 2<div class="accordion1"> 3<span class="wpcf7-form-control-wrap yoyaku_day1"><span class="wpcf7-form-control wpcf7-radio radio_box"><span class="wpcf7-list-item first"><input type="radio" name="yoyaku_day1" value="06/30(木)"><span class="wpcf7-list-item-label">06/30(木)</span></span><span class="wpcf7-list-item"><input type="radio" name="yoyaku_day1" value="07/01(金)"><span class="wpcf7-list-item-label">07/01(金)</span></span><span class="wpcf7-list-item"><input type="radio" name="yoyaku_day1" value="07/02(土)"><span class="wpcf7-list-item-label">07/02(土)</span></span><span class="wpcf7-list-item"><input type="radio" name="yoyaku_day1" value="07/04(月)"><span class="wpcf7-list-item-label">07/04(月)</span></span><span class="wpcf7-list-item"><input type="radio" name="yoyaku_day1" value="07/05(火)"><span class="wpcf7-list-item-label">07/05(火)</span></span><span class="wpcf7-list-item"><input type="radio" name="yoyaku_day1" value="07/06(水)"><span class="wpcf7-list-item-label">07/06(水)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/07(木)"><span class="wpcf7-list-item-label">07/07(木)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/08(金)"><span class="wpcf7-list-item-label">07/08(金)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/09(土)"><span class="wpcf7-list-item-label">07/09(土)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/11(月)"><span class="wpcf7-list-item-label">07/11(月)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/12(火)"><span class="wpcf7-list-item-label">07/12(火)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/13(水)"><span class="wpcf7-list-item-label">07/13(水)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/14(木)"><span class="wpcf7-list-item-label">07/14(木)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/15(金)"><span class="wpcf7-list-item-label">07/15(金)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/16(土)"><span class="wpcf7-list-item-label">07/16(土)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/19(火)"><span class="wpcf7-list-item-label">07/19(火)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/20(水)"><span class="wpcf7-list-item-label">07/20(水)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/21(木)"><span class="wpcf7-list-item-label">07/21(木)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/22(金)"><span class="wpcf7-list-item-label">07/22(金)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/23(土)"><span class="wpcf7-list-item-label">07/23(土)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/25(月)"><span class="wpcf7-list-item-label">07/25(月)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/26(火)"><span class="wpcf7-list-item-label">07/26(火)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/27(水)"><span class="wpcf7-list-item-label">07/27(水)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/28(木)"><span class="wpcf7-list-item-label">07/28(木)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/29(金)"><span class="wpcf7-list-item-label">07/29(金)</span></span><span class="wpcf7-list-item none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="07/30(土)"><span class="wpcf7-list-item-label">07/30(土)</span></span><span class="wpcf7-list-item last none" style="display: inline-block;"><input type="radio" name="yoyaku_day1" value="08/01(月)"><span class="wpcf7-list-item-label">08/01(月)</span></span></span></span> 4<div class="accordion_btn trigger">さらに表示する</div> 5</div> 6</div>
回答1件