jQueryを使った要素の表示非表示

Question

実現したいこと

!!

このように、表示非表示でクリックした要素だけが右側の矢印の向きが変わるようにしたい

現状

クリックした要素だけでなく、全ての矢印の向きが変わってしまう。

コード

html

   <div class="question-answer">
        <h1><i class="far fa-envelope-open"></i>ヘディングのテキストよくある質問</h1>
        <div class="conteiner">
            <div class="secList">
                <a><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txta" class="section">
                <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。
                    従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。
                </p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>参加費以上に稼げなかったらどうなりますか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtb" class="section">
                <p>参加費である258,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。（講座参加後、週30時間以上の実践をすることと、週１回の実践報告をすることが延長条件です。）きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。
                </p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>滞在中の宿泊先はどうなりますか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtc" class="section">
                <p>宿泊費用が必要ですが、iSara提携のホステルに宿泊することになりますので心配はありません。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>滞在中の食事はどうなりますか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtd" class="section">
                <p>拠点となる新築シェアハウスの周辺に、50バーツ程度の（160円）安価な飲食店が多数あります。 日本食レストランもありますし、出前を取ることも可能です。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>追加でかかる費用はありますか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txte" class="section">
                <p>宿泊費（トータル20000円）と食費（一食150円程度）くらいです。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>就職、転職はできますか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtf" class="section">
                <p>DODAの調査によると、2017年のエンジニアの求人倍率は7.5倍です。これは、人材不足が叫ばれる医療業界（医師：6倍、看護師：3倍）よりも高い数値です。ですのできちんとしたスキルを身につけることができれば、就職・転職には困らないはずです。元リクルートの転職のプロも運営スタッフとして参加しています。
                </p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>フリーランスにならなければならないのですか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtg" class="section">
                <p>いいえ、必ずフリーランスにならないといけないわけではありません。 実際に過去の卒業生の方の進路も、独立、副業として続ける、就職するなど様々です。 </p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>ノマドワーカー的に世界を旅しながら働きたいです。<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txth" class="section">
                <p>
                    きちんと努力し、スキルを身に着けることができれば可能です。 iSaraは、「好きなときに働き、好きなときに遊ぶ」という人生を送れる人を増やすために開講しました。
                    ちなみに、講師は全員ノマドワーカーとして、働きながら自由に世界中を旅しています。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>学ぶプログラミング言語はなんですか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txti" class="section">
                <p>HTML / CSS / PHPを学びます。どの言語も需要が高いです。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>将来的にwebサービス、アプリ、メディアを作りたいです。<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtj" class="section">
                <p>経験してる講師がいますよ。大丈夫です。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>次回開催要諦はありますか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtk" class="section">
                <p>未定です。まずはお問合せください。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>海外に出るのが初めてで不安です。<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtl" class="section">
                <p>講師陣が現地での生活をサポートしますので安心してください。ただしパスポート取得は必要です。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>タイ語、英語が一切話せません。参加は可能でしょうか。<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtm" class="section">
                <p>タイ語スタッフ、英語スタッフがいるのでOKです。日本人、タイ人スタッフがおりますので、期間中のトラブル対応の心配は必要ありません。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>治安はどうですか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txtn" class="section">
                <p>バンコクは、東南アジアや南アジアの他の国の都市部と比べると、街中も整備されており、非常に治安の良い街です。日本ほどではないですが、世界でも非常に治安の良い国として知られています。</p>
            </div>
            <div class="secList">
                <a><i class="far fa-question-circle"></i>パソコンは必要ですか？<i class="fa fa-angle-down"></i><i
                        class="fa fa-angle-up"></i></a>
            </div>
            <div id="txto" class="section">
                <p>はい。ノートPCのご用意が必要です。</p>
            </div>
        </div>

jQuery

$(function () {

  $('.secList').on('click', function () {
    if ($(this).next().hasClass('isShow')) {
      $(this).next().removeClass('isShow');
      $('.fa-angle-up').hide()
      $('.fa-angle-down').show()
    } else {
      $(this).next().addClass('isShow');
      $('.fa-angle-down').hide()
      $('.fa-angle-up').show()
    }
    $(this).next().slideToggle();
  });

});

このコードではhide() show()が全ての要素に効くようになっているのは分かっているのですが、うまくそこの部分だけというコードが思いつきません。

Answer 1

おっしゃる通り、$('.fa-angle-up')と指定しているので、当てはまる要素すべてに適用されています。
.find()などを使用して、適用させたい要素を絞ればよいです。

（コード例）

$(this).find(".fa-angle-up,.fa-angle-down").toggle();

.find() | jQuery API Documentation

Comments

[M_Ren]

find()を使えばよかったんですね。こんな簡単なコードで完結するとは！
助かりました！ありがとうございました。