JS アコーディオン 閉じれない

Question

アコーディオンで開いたり閉じたりしたいと思い
下記のサイトを参考に実装したのですがアコーディオンを閉じる事が出来ないです。
https://www.weblab.co.jp/blog/creator/11465.html

やったこと
自分なりにコードを改造して、
if (h_tag.length == 0) {｝
を追加し２度目ボタンを押したときに
一番最初に動作するコードを
もう一度走らせれば動くのでは？と思い
コピペして、入れてみたのですが動作せず

自分なりに検証してみた
ifの途中にconsole.log(h_tag.length);を入れてみた
if自体は判定が成功していて
ifの直下にconsole.log(h_tag.length);のコードを置いていて
０がログに表示されていたので、動作していることは間違いないと思う。

知りたい事
何処が悪くて動かないのか？知りたい

以下コード

//アコーディオン
$(function() {
    var num = 21; //何個づつ開くか指定
    var d_num = 6; //最初表示させたい個数を指定
    $('.accordion_box').each(function() { //.accordion_boxを検索
        $('.accordion1 span.wpcf7-list-item:gt(' + (d_num - 1) + ')', this).addClass('none'); //d_numより後の要素は.none付与
        if ($('.accordion1 span.wpcf7-list-item', this).length > d_num) {
            $('.trigger', this).show(); //d_numより要素の数が多ければ「もっとみる」ボタン表示
        }
    });
    $('.accordion_box .accordion_btn.trigger').on('click', function() {
        var h_tag = $(this).parents('.accordion_box').find('.accordion1 span.wpcf7-list-item.none'); //クリックしたボタンに関連する.accordionの非表示要素を取得
        if (h_tag.length == 0) {
　　　　　//0なら開いた後なので、初期状態に戻す
            $('.accordion_box').each(function() { //.accordion_boxを検索
                $('.accordion1 span.wpcf7-list-item:gt(' + (d_num - 1) + ')', this).addClass('none'); //d_numより後の要素は.none付与
                if ($('.accordion1 span.wpcf7-list-item', this).length > d_num) {
                    $('.trigger', this).show(); //d_numより要素の数が多ければ「もっとみる」ボタン表示
                }
            });
        } else {
            h_tag.slice(0, num).slideDown('fast').toggleClass('none'); //num個までの非表示要素を開いて.noneを外す
        }
    });

});

表示しているHTML

<div class="accordion_box">
<div class="accordion1">
<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>
<div class="accordion_btn trigger">さらに表示する</div>
</div>
</div>

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題が再現しませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

[AMK]

ありがとう御座います！
問題が再現出来ないということは、あのコードで動くと言うことでね

帰ったら別コードにして検証してみます！

Answer 1

最初は、6こ表示させておいて、
クリックですべて表示、もう一度クリックで元に戻すだけなら、参考先のように複雑なことをしなくても、下記のようなコードでいいのでは。

//アコーディオン
$(function () {
  var d_num = 6; //最初表示させたい個数を指定
  $('.accordion_box .accordion_btn.trigger').on('click', function () {
    $(this).parents('.accordion_box')
           .find('.accordion1 span.wpcf7-list-item:gt('+(d_num-1)+')')
           .slideToggle('fast');
    if ($(this).text() === '閉じる') {
      $(this).text('さらに表示する');
    } else {
      $(this).text('閉じる');
    }
  });
});

Codepenサンプル
jQuery アコーディオン開閉

Comments

[AMK]

ありがとうございます！！
思い通りの動作が出来ました！！