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

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

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

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

HTML
1<div class="qa-list mts">
2      <dl class="qa">
3        <dt>タイトル１</dt>
4        <dd>
5          <p>内容１
6          </p>
7        </dd>
8      </dl>
9      <dl class="qa">
10        <dt>タイトル２</dt>
11        <dd>
12          <p>内容２
13          </p>
14        </dd>
15      </dl>
16    </div>

JS
1$(".qa-list dd").hide();
2$(".qa-list dl").on("click", function(e){
3    $('dd',this).slideToggle('fast');
4    if($(this).hasClass('open')){
5        $(this).removeClass('open');
6    }else{
7        $(this).addClass('open');
8    }
9});

CSS
1
2.qa-list dl {
3  position: relative;
4  margin: 30px 0 0;
5  cursor: pointer;
6  border: 1px solid #DDD;
7}
8
9.qa-list dl:first-child {
10  margin-top: 0;
11}
12
13.qa-list dl::after {
14  position: absolute;
15  top: 27px;
16  right: 26px;
17  display: block;
18  width: 7px;
19  height: 7px;
20  margin: auto;
21  content: '';
22  transform: rotate(135deg);
23  border-top: 2px solid #000;
24  border-right: 2px solid #000;
25}
26
27.qa-list .open::after {
28  transform: rotate(-45deg);
29}
30
31.qa-list dl dt {
32  position: relative;
33  margin: 0;
34  padding: 20px 20px 20px 60px;
35  font-weight: bold;
36  background: #ddd;
37}
38
39.qa-list dl dt::before {
40  font-size: 22px;
41  line-height: 1;
42  position: absolute;
43  top: 20px;
44  left: 20px;
45  display: block;
46  content: 'Q.';
47  color: #C59C45;
48}
49
50.qa-list dl dd::before {
51  font-size: 22px;
52  line-height: 1;
53  position: absolute;
54  left: 20px;
55  display: block;
56  content: 'A.';
57  font-weight: bold;
58  color: #5DADBB;
59}
60
61.qa-list dl dd {
62  position: relative;
63  margin: 0;
64  padding: 20px 20px 20px 60px;
65}
66
67.qa-list dl dd p {
68  margin: 30px 0 0;
69}
70
71.qa-list dl dd p:first-child {
72  margin-top: 0;
73}
74
75@media screen and (max-width: 767px) {
76  .qa-list dl {
77    margin: 10px 0 0;
78  }
79  .qa-list dl:after {
80    top: 20px;
81    right: 20px;
82    width: 7px;
83    height: 7px;
84  }
85  .qa-list dl dt {
86    padding: 16px 16px 16px 50px;
87    font-size: 14px;
88  }
89  .qa-list dl dt::before {
90    font-size: 14px;
91    top: 20px;
92    left: 20px;
93  }
94  .qa-list dl dd::before {
95    font-size: 14px;
96    left: 20px;
97    margin-top: 5px;
98  }
99  .qa-list dl dd {
100    margin: 0;
101    padding: 16px 16px 16px 50px;
102    font-size: 14px;
103  }
104  .qa-list dl dd p {
105    margin: 30px 0 0;
106  }
107  .qa-list dl dd p:first-child {
108    margin-top: 0;
109  }
110}

行動規範の内容に同意します

回答2件

ベストアンサー

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

javascript
1$(function(){
2  $(".qa-list dd").hide();
3  $(".qa-list dl").on("click", function(e){
4    $('dd',this).slideToggle('fast');
5    $(this).toggleClass('open');
6  });
7});

投稿2020/12/18 03:25

yambejp

総合スコア116661

tuntun

2020/12/18 03:33

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

yambejp

2020/12/18 03:36 編集

＞解決しませんどういう状況なのでしょうか？コンソールでエラーは確認していますか？見た感じmtsは一切利用されていないので影響はないと思います

tuntun

2020/12/18 03:40

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

yambejp

2020/12/18 03:49

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

tuntun

2020/12/18 06:05

呼び込みを行ってまた同様の現象が起こったので 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',を入れることで正常に動作することができました！何度も回答していただきありがとうございました！

行動規範の内容に同意します