HTML内のアコーディオンが動作しない

Question

Webページでアコーディオンを実装したいのですが、上手く動作しません・・・
やりたいこととしては

• デフォルトでアコーディオンを閉じている状態
• クリックすると開く状態（アコーディオンなので当たり前ですが・・・）

にしたいのですが、何がいけないのか把握できません。どなたか教えて頂けませんでしょうか？
それぞれのソースは下記に記載しておきます。

<div class="qa-list mts">
      <dl class="qa">
        <dt>タイトル１</dt>
        <dd>
          <p>内容１
          </p>
        </dd>
      </dl>
      <dl class="qa">
        <dt>タイトル２</dt>
        <dd>
          <p>内容２
          </p>
        </dd>
      </dl>
    </div>

$(".qa-list dd").hide();
$(".qa-list dl").on("click", function(e){
    $('dd',this).slideToggle('fast');
    if($(this).hasClass('open')){
        $(this).removeClass('open');
    }else{
        $(this).addClass('open');
    }
});

.qa-list dl {
  position: relative;
  margin: 30px 0 0;
  cursor: pointer;
  border: 1px solid #DDD;
}

.qa-list dl:first-child {
  margin-top: 0;
}

.qa-list dl::after {
  position: absolute;
  top: 27px;
  right: 26px;
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transform: rotate(135deg);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.qa-list .open::after {
  transform: rotate(-45deg);
}

.qa-list dl dt {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
  font-weight: bold;
  background: #ddd;
}

.qa-list dl dt::before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  content: 'Q.';
  color: #C59C45;
}

.qa-list dl dd::before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  left: 20px;
  display: block;
  content: 'A.';
  font-weight: bold;
  color: #5DADBB;
}

.qa-list dl dd {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
}

.qa-list dl dd p {
  margin: 30px 0 0;
}

.qa-list dl dd p:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .qa-list dl {
    margin: 10px 0 0;
  }
  .qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
  }
  .qa-list dl dt {
    padding: 16px 16px 16px 50px;
    font-size: 14px;
  }
  .qa-list dl dt::before {
    font-size: 14px;
    top: 20px;
    left: 20px;
  }
  .qa-list dl dd::before {
    font-size: 14px;
    left: 20px;
    margin-top: 5px;
  }
  .qa-list dl dd {
    margin: 0;
    padding: 16px 16px 16px 50px;
    font-size: 14px;
  }
  .qa-list dl dd p {
    margin: 30px 0 0;
  }
  .qa-list dl dd p:first-child {
    margin-top: 0;
  }
}

Answer 1

単に$(function()するだけかもしれません

$(function(){
  $(".qa-list dd").hide();
  $(".qa-list dl").on("click", function(e){
    $('dd',this).slideToggle('fast');
    $(this).toggleClass('open');
  });
});

Comments

[tuntun]

ご回答ありがとうございます。上記のコードを入力しても解決しませんでした。
HTMLの<div class="qa-list mts">内の「qa-list mts」はどこにも紐づいていないからこれも問題なのかと思っているのですが違いますでしょうか？

[yambejp]

＞解決しません

どういう状況なのでしょうか？
コンソールでエラーは確認していますか？

見た感じmtsは一切利用されていないので影響はないと思います

[tuntun]

Uncaught ReferenceError: $ is not defined
at 〇〇.js:1
というエラーが表示されました。

[yambejp]

それって、jQueryを読んでないんです
どのバージョンでもいいのでページの頭の方で
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

のような呼び込みをしてください

[tuntun]

呼び込みを行ってまた同様の現象が起こったので

window.addEventListener('DOMContentLoaded', function(){
$(".qa-list dd").hide();
$(".qa-list dl").on("click", function(e){
$('dd',this).slideToggle('fast');
$(this).toggleClass('open');
});
});

最初にwindow.addEventListener('DOMContentLoaded',を入れることで正常に動作することができました！何度も回答していただきありがとうございました！

Answer 2

ターゲットの設定がきちっとできていませんね。
dtをクリックした時に隣のddをアコーディオンするのでしたら

$(".qa-list dt").on("click", function(){
$(this).next('dd').slideToggle('fast');
});

でいけると思います。

Comments

[tuntun]

ご回答ありがとうございます。上記のコードを入力しても解決しませんでした。
HTMLの<div class="qa-list mts">内の「qa-list mts」はどこにも紐づいていないからこれも問題なのかと思っているのですが違いますでしょうか？