質問の回答が隠れた時、矢印を下向きに変えたい

質問1の回答が隠れた時に矢印を下向きに変えたい。

他の質問ではできたのですが、質問1だけなぜ下向きにできません。

html
1
2<article class="question-area">
3    <div class="row">
4        <h2>質問</h2>   
5        <div class="row-inner">     
6            <div class="qa">
7                <div class="qa-item">
8                    <div class="default-question js-default-question"><span class="q">Q.</span>質問1<span class="arrow"></span></div>
9                    <div class="default-answer">
10                        <p>回答1</p>
11                    </div>
12                </div>
13            
14                <div class="qa-item">
15                    <div class="question js-question"><span class="q">Q.</span>質問<span class="arrow"></span></div>
16                    <div class="answer">
17                    <p>回答2</p>
18                    </div>
19                </div>
20
21                <div class="qa-item">
22                    <div class="question js-question"><span class="q">Q.</span>質問<span class="arrow"></span></div>
23                    <div class="answer">
24                    <p>回答3</p>
25                    </div>
26                </div>
27            
28                <div class="qa-item">
29                    <div class="question js-question"><span class="q">Q.</span>質問<span class="arrow"></span></div>
30                    <div class="answer">
31                    <p>回答4</p>
32                    </div>
33                </div>
34
35                <div class="qa-item">
36                    <div class="question js-question"><span class="q">Q.</span>質問<span class="arrow"></span></div>
37                    <div class="answer">
38                    <p>回答5</p>
39                    </div>
40                </div>
41            </div>
42            <a href="">
43                <div class="circle-btn">
44                    <p>質問をもっと⾒る<span class="arrow-right"></span></p>
45                </div>
46            </a>   
47        </div>
48    </div>
49</article>

css
1.question-area {
2    height: 940px;
3    width: 80%;
4    margin:0 auto;
5    border-bottom: 1px solid #D5D3D3;
6    padding: 125px 0 75px 0;
7    text-align: center;
8  }
9  
10  .question-area h2 {
11    margin-bottom: 55px;
12  }
13  
14  .qa {
15    text-align: left;
16  }
17  
18  .qa .qa-item {
19    border-bottom: 1px solid #D5D3D3;
20    width: 100%;
21    margin-bottom: 40px;
22  }
23  
24  .question {
25    padding: 10px 0;
26    font-size: 18px;
27    cursor: pointer;
28  }
29  
30  .question .q {
31    font-size: 28px;
32    padding-right: 10px;
33  }
34  
35  .default-question {
36    padding: 10px 0;
37    font-size: 18px;
38      cursor: pointer;
39  }
40  .default-answer {
41      cursor: pointer;
42  }
43  
44  .default-question .q {
45    font-size: 28px;
46    padding-right: 10px;
47  }
48  
49  .default-answer {
50    padding: 10px 0 10px 0;
51    font-size: 14px;
52    color: #626060;
53  }
54  
55  .answer {
56    padding: 10px 0 10px 0;
57    font-size: 14px;
58    display: none;
59    cursor: pointer;
60    color: #626060;
61  }
62  
63  .arrow {
64    transition: all 0.2s ease-in-out;
65    display: inline-block;
66    width: 15px;
67    height: 15px;
68    border-top: solid 2px #585858;
69    border-right: solid 2px #585858;
70    transform: rotate(135deg);
71    float: right;
72    margin-top: 20px;
73  }
74  
75  .default-question .arrow {
76    transform: rotate(-45deg);
77  }
78  
79  
80  .question.open .arrow {
81    transform: rotate(-45deg);
82    top: 40%;
83  }
84  
85  .default-question.open .arrow {
86    transform: rotate(135deg);
87  }
88

js
1jQuery(function($){
2
3
4    //Q&A
5    // $(".answer").css("display", "none");
6$(".default-answer").css("display", "block");
7
8$(".js-question").click(function () {
9  $(".js-question").not(this).removeClass("open").next().slideUp(300);
10  $(this).toggleClass("open").next().slideToggle(300);
11});
12
13
14$(".js-default-question").click(function () {
15  $(this).toggleClass(".default-open").next().slideToggle(300);
16});
17    
18
19});

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

回答1件

ベストアンサー

javascript
1$(".js-default-question").click(function () {
2  $(this).toggleClass(".default-open").next().slideToggle(300);
3});

ここの.default-openがcssに存在しないからです。

html
1<div class="qa-item">
2  <div class="default-question js-default-question">
3    <span class="q">Q.</span>質問1<span class="arrow"></span>
4  </div>
5  <div class="default-answer">
6    <p>回答1</p>
7  </div>
8</div>