jQueryアコーディオンの矢印の切り替えが上手くいかない

タイトルの通りです　クリックすると矢印が増えてしまいます　見直してみましたがコードの何がおかしくてそうなってしまうのか全くわかりません　何かコードを追加するべきなのでしょうか

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>isara模写</title>
6    <link rel="stylesheet" href="css/isara.css">
7    <link rel="stylesheet" href="css/reset.css">
8    <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
9  </head>
10  <body>
11      <div class="qa">
12        <h2><i class="far fa-envelope-open"></i>よくある質問</h2>
13        <ul class="question-accordion">
14          <li>
15            <div class="miseru">
16              <h3><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？</h3>
17              <span><i class="fas fa-angle-down"></i></span>
18            </div>
19            <div class="kakusu">
20              <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</p>
21
22            </div>
23          </li>
24
25          <li>
26            <div class="miseru">
27              <h3><i class="far fa-question-circle"></i>参加費以上に稼げなかったらどうなりますか？</h3>
28              <span><i class="fas fa-angle-down"></i></span>
29            </div>
30            <div class="kakusu">
31              <p>参加費である258,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。（講座参加後、週30時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</p>
32            </div>
33          </li>
34
35          <li>
36            <div class="miseru">
37              <h3><i class="far fa-question-circle"></i>滞在中の宿泊先はどうなりますか？</h3>
38              <span><i class="fas fa-angle-down"></i></span>
39            </div>
40            <div class="kakusu">
41              <p>宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</p>
42            </div>
43          </li>
44
45          <li>
46            <div class="miseru">
47              <h3><i class="far fa-question-circle"></i>滞在中の食事はどうなりますか？</h3>
48              <span><i class="fas fa-angle-down"></i></span>
49            </div>
50            <div class="kakusu">
51              <p>拠点となる新築シェアハウスの周辺に、50バーツ程度の（160円）安価な飲食店が多数あります。 日本食レストランもありますし、出前を取ることも可能です。</p>
52            </div>
53          </li>
54
55          <li>
56            <div class="miseru">
57              <h3><i class="far fa-question-circle"></i>追加でかかる費用はありますか？</h3>
58              <span><i class="fas fa-angle-down"></i></span>
59            </div>
60            <div class="kakusu">
61              <p>宿泊費（トータル20000円）と食費（一食150円程度）くらいです。</p>
62            </div>
63          </li>
64
65          <li>
66            <div class="miseru">
67              <h3><i class="far fa-question-circle"></i>就職、転職はできますか？</h3>
68            <span><i class="fas fa-angle-down"></i></span>
69            </div>
70            <div class="kakusu">
71              <p>DODAの調査によると、2017年のエンジニアの求人倍率は7.5倍です。これは、人材不足が叫ばれる医療業界（医師：6倍、看護師：3倍）よりも高い数値です。ですのできちんとしたスキルを身につけることができれば、就職・転職には困らないはずです。元リクルートの転職のプロも運営スタッフとして参加しています。</p>
72            </div>
73          </li>
74
75          <li>
76            <div class="miseru">
77              <h3><i class="far fa-question-circle"></i>フリーランスにならなければならないのですか？</h3>
78               <span><i class="fas fa-angle-down"></i></span>
79            </div>
80            <div class="kakusu">
81              <p>いいえ、必ずフリーランスにならないといけないわけではありません。 実際に過去の卒業生の方の進路も、独立、副業として続ける、就職するなど様々です。</p>
82            </div>
83          </li>
84
85          <li>
86            <div class="miseru">
87              <h3><i class="far fa-question-circle"></i>ノマドワーカー的に世界を旅しながら働きたいです。可能ですか？</h3>
88               <span><i class="fas fa-angle-down"></i></span>
89            </div>
90            <div class="kakusu">
91              <p>きちんと努力し、スキルを身に着けることができれば可能です。 iSaraは、「好きなときに働き、好きなときに遊ぶ」という人生を送れる人を増やすために開講しました。 ちなみに、講師は全員ノマドワーカーとして、働きながら自由に世界中を旅しています。</p>
92            </div>
93          </li>
94
95          <li>
96            <div class="miseru">
97              <h3><i class="far fa-question-circle"></i>学ぶプログラミング言語はなんですか？</h3>
98            <span><i class="fas fa-angle-down"></i></span>
99            </div>
100            <div class="kakusu">
101              <p>HTML / CSS / PHPを学びます。どの言語も需要が高いです。</p>
102            </div>
103          </li>
104
105          <li>
106            <div class="miseru">
107              <h3><i class="far fa-question-circle"></i>将来的にwebサービス、アプリ、メディアを作りたいです。</h3>
108              <span><i class="fas fa-angle-down"></i></span>
109            </div>
110            <div class="kakusu">
111              <p>経験してる講師がいますよ。大丈夫です。</p>
112            </div>
113          </li>
114
115          <li>
116            <div class="miseru">
117              <h3><i class="far fa-question-circle"></i>次回開催の予定はありますか？</h3>
118              <span><i class="fas fa-angle-down"></i></span>
119            </div>
120            <div class="kakusu">
121              <p>未定です。まずはお問合せください。</p>
122            </div>
123          </li>
124
125          <li>
126            <div class="miseru">
127              <h3><i class="far fa-question-circle"></i>海外に出るのが初めてで不安です。</h3>
128              <span><i class="fas fa-angle-down"></i></span>
129            </div>
130            <div class="kakusu">
131              <p>講師陣が現地での生活をサポートしますので安心してください。ただしパスポート取得は必要です。</p>
132            </div>
133          </li>
134
135          <li>
136            <div class="miseru">
137              <h3><i class="far fa-question-circle"></i>タイ語、英語が一切話せません。参加可能でしょうか。</h3>
138              <span><i class="fas fa-angle-down"></i></span>
139            </div>
140            <div class="kakusu">
141              <p>タイ語スタッフ、英語スタッフがいるのでOKです。日本人、タイ人スタッフがおりますので、期間中のトラブル対応の心配は必要ありません。</p>
142            </div>
143          </li>
144
145          <li>
146            <div class="miseru">
147              <h3><i class="far fa-question-circle"></i>治安はどうですか？</h3>
148            <span><i class="fas fa-angle-down"></i></span>
149            </div>
150            <div class="kakusu">
151              <p>バンコクは、東南アジアや南アジアの他の国の都市部と比べると、街中も整備されており、非常に治安の良い街です。日本ほどではないですが、世界でも非常に治安の良い国として知られています。</p>
152            </div>
153          </li>
154
155          <li>
156            <div class="miseru">
157              <h3><i class="far fa-question-circle"></i>パソコンは必要ですか？</h3>
158            <span><i class="fas fa-angle-down"></i></span>
159            </div>
160            <div class="kakusu">
161              <p>はい。ノートPCのご用意が必要です。</p>
162            </div>
163          </li>
164
165
166
167        </ul>
168      </div>
169<script src="js/jquery-3.5.1.min.js"></script>
170     <script src="js/isara.js">
171     </script>
172</body>

CSS
1.qa{padding:65px 0px 60px; text-align:center;}
2 .qa h2{font-size:1.8rem; color:#333; margin-bottom:45px;}
3.kakusu{display:none;}
4.miseru{display:flex; justify-content:space-between; }
5.miseru h3{font-size:1.3rem;}
6.fa-question-circle{color:#016EA9; font-size:1.1rem; }
7.fa-angle-down{font-size:1.9rem; color:#E5E5E5; padding-right:5px;}
8.question-accordion{width:75%; margin:0 auto; list-style: none;}
9.question-accordion li{width:100%; border:solid #E5E5E5 1px; margin-bottom:7px; padding:23px 18px;
10height:65px; cursor:pointer;}
11.question-accordion li:hover{text-decoration:underline;}

jQuery
1$(function(){
2  $(".question-accordion li").click(function(){var $answer=$(this).find(".kakusu");
3 if($answer.hasClass("open")){
4   $answer.removeClass("open");
5   $answer.slideUp();
6   $(this).find(".fa-angle-down").html(`<i class="fas fa-angle-up"></i>`;
7 }
8 else{
9   $answer.addClass("open");
10   $answer.slideDown();
11   $(this).find(".fa-angle-up").html(`<i class="fas fa-angle-down"></i>`);
12 };
13});
14});

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

回答1件

ベストアンサー

jQuery の html() は子要素のHTMLですので、セレクタは親要素にしないとダメです。
あと、fa-angle-up と fa-angle-down が逆です。

js
1$(function () {
2  $(".question-accordion li").click(function () {
3    var $answer = $(this).find(".kakusu");
4    if ($answer.hasClass("open")) {
5      $answer.removeClass("open");
6      $answer.slideUp();
7      $(this).find(".miseru span").html(`<i class="fas fa-angle-down"></i>`);
8    }
9    else {
10      $answer.addClass("open");
11      $answer.slideDown();
12      $(this).find(".miseru span").html(`<i class="fas fa-angle-up"></i>`);
13    };
14  });
15});

toggle系メソッドと三項演算子を使うとifを使わずにシンプルに記述できます。

js
1$(function () {
2  $(".question-accordion li").click(function () {
3    $(this).toggleClass("open").find(".kakusu").slideToggle();
4    var dir = $(this).hasClass("open") ? "up" : "down";  
5    $(this).find(".miseru span").html(`<i class="fas fa-angle-${dir}"></i>`);
6  });
7});

矢印もアニメーションにした方が自然な感じになると思いますので、
矢印はCSSでフリップアニメーションにしてみました。

css
1.question-accordion li .fas {
2  transition: transform .5s;
3}
4.question-accordion li.open .fas {
5  transform: rotatex(180deg);
6}

js
1$(function () {
2  $(".question-accordion li").click(function () {
3    $(this).toggleClass("open").find(".kakusu").slideToggle();
4  });
5});

投稿2021/02/26 15:07

編集2021/02/26 16:03

hatena19

総合スコア34073

syo--

2021/02/27 00:46

便利な書き方まで教えてくださり、ありがとうございます html()の使い方を間違えていたのですね　復習します

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

jQueryアコーディオンの矢印の切り替えが上手くいかない

関連した質問