addClassを使ってjQueryのアコーディオンを動かしたいです

Question

前提・実現したいこと

jQueryを使ってアコーディオンを作りたいのですが、思い通りに動きません。
どう訂正すれば良いか教えていただけるとありがたいです。

該当のソースコード

      <div class="questions">
        <h2 class="txtl">よくある質問</h2>
        <section class="questionslist">
          <div class="panel-group">
            <div class="panel panel-default">
              <div class="questionsheading">
                <h4 class="panel-title">
                  <a  href="#collapseFirst" class="txtm">
                    プログラミングスキルは必要ですか？
                  </a>
                </h4>
              </div>
              <div id="collapseFirst" class="collapse" style="height: 0px;">
                <div class="questionsbody" >
                  <p class="txts">
                    いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

.questions {
  padding: 40px 10%;
  text-align: center;
}

.questions .txtl {
  margin-bottom: 40px;
}

.questionslist {
  width: 1170px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  text-align: left;
}

.panel-group {
  margin-bottom: 20px;
}

.panel-group .panel {
  margin-bottom: 0;
  border-radius: 4px;
}
.panel-default {
  border: none;
}

.questionsheading {
  padding: 20px 20px;
  background-color: #fff !important;
  color: #000000 !important;
  border: 1px solid #e5e5e5 !important;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}

.questionsheading h4 a {
  cursor: pointer;
  display: block;
}
.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a {
  color: inherit;
}

.questionsbody {
  border: none !important;
  background-color: #fff;
  padding: 20px;
}

$(function () {

  $('.questions .txtm').click(function() {
    var $questionsbody = $('.collapse').find('.txts');
    if($questionsbody.hasClass('open')) {
      $questionsbody.removeClass('open');
      $questionsbody.slideUp();

    } else {
      $questionsbody.addClass('open');
      $questionsbody.slideDown();
    }
  });
});

補足情報（FW/ツールのバージョンなど）

これはiSARAのというサイトの模写です。

Comments

[kei344]

「思い通りに動きません」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[m.ts10806]

＞思い通りに動きません
何が思う通りで
何が起きているのでしょうか。

ゴールと現象を具体的に記載して下さい。
https://teratail.com/help/question-tips

[hayachi6446]

説明不足でした。
アドバイスありがとうございます！

htmlに書いてある「プログラミングは必要ですか？」をクリックしたら、その下に「いいえ、必要ありません」の文章が表示されるようにしたいです。
しかし、クリックしても下に文章が表示されません。
クリックする前はbootstrapのcollapseクラスで「いいえ、必要ありません」は隠れています。

エラーはとくに見当たらなかったです。

Answer 1

style 属性を外してください。

              <!--div id="collapseFirst" class="collapse" style="height: 0px;"-->
              <div id="collapseFirst" class="collapse">

しかし、Bootstrap の Collapse を使っているのであれば Bootstrap ですべきでしょう。
https://getbootstrap.com/docs/4.4/components/collapse/

<a href="#collapseFirst" class="txtm" data-toggle="collapse">

あるいは

    $('.collapse').collapse('toggle');

Comments

[hayachi6446]

ご回答ありがとうございます！
style属性を外した結果出来ました。

Answer 2

HTMLのstyle="height: 0px;"を外し、jQueryの記述を下記のように変更したらできました。

$(function () {

 $('.questionsheading').each(function(){
    $(this).click(function() {
      $(this).next().slideToggle()
      return false;
    });
 });

});

ご協力ありがとうございました！