アコーディオンの開閉の逆

Question

アコーディオンのjavascript実装について質問です。
仕様では閉→開の状態を、開→閉にしたいのですが記述方法が分かりません。
勉強不足で大変申し訳ありませんが、教えて頂ければ幸いです。

どうぞよろしくお願い致します。

参考サイト
https://bbnyuyu.hatenablog.com/entry/js-accordion

<h2 class="js-dropdown-btn">タイトルクリック</h2>
<p class="js-dropdown-box">この中を初期は開き、閉じた状態にしたい</p>

<script>
  $(function(){
    $('.js-dropdown-box').wrap('<div class="js-dropdown-box-wrap">');
    $('.js-dropdown-box-wrap').css({
      'overflow': 'hidden',
      'height': 0,
      'transition': 'height .3s linear'
    });
    $('.js-dropdown-btn').css('cursor','pointer');
    $('.js-dropdown-btn').on('click',function(){
      if($(this).hasClass('js-dropdown-btn-on')){
        $(this).next('.js-dropdown-box-wrap').css('height','0');
        $(this).removeClass('js-dropdown-btn-on');
      }else{
        var target_height = $(this).next('.js-dropdown-box-wrap').children('.js-dropdown-box').outerHeight();
        $(this).next('.js-dropdown-box-wrap').css('height',target_height);
        $(this).addClass('js-dropdown-btn-on');
      }
    });
  });
</script>

Comments

[yambejp]

見た感じいまのソースだと中途半端にしか開きませんがこれが仕様ですか？
wrapしてるjs-dropdown-box-wrapの高さがひくすぎ？

[kosabi]

はい、仕様となっております。

Answer 1

    $('.js-dropdown-btn').on('click',function(){
      ・・・
    }).trigger('click');

Comments

[kosabi]

有難うございます！解決致しました。
yambejp様のように知識を得たいと思います。
よろしくお願い致します。