jqueryのアコーディオン開閉でアイコンを切り替えたい

Question

jqueryでアコーディオンが閉じているときは<i class="fas fa-chevron-down"></i>を表示して、開いているときは、<i class="fas fa-chevron-up"></i>に切り替えたいのですが、どうしたらいいですか？よろしくお願いいたします。

 <div class="qa-set">
    <div class='q'>
    　<p><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？<i class="fas fa-chevron-down"></i></p>
    </div>
    <div class='a'>
            <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしてあります。この点だけはご了承ください。</p>
    </div>
 </div>

.q {
  font-size: 20px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  margin-bottom: 5px;
  line-height: 1.3;
}
.q:hover {
  text-decoration: underline black;
}
.a {
  font-size: 16px;
  padding: 20px;
  margin-bottom: 10px;
  display: none;
}

.fa-question-circle {
  color: #016ea9;
}
i.fa-chevron-down {
  color: #e5e5e5;
  float: right;
  line-height: unset;
}

$(function() {
  $('.qa-set').click(function() {
    var $anster=$(this).find('.a')
    if ($anster.hasClass('open')) {
      $anster.removeClass('open');
      $anster.slideUp();
    } else {
      $anster.addClass('open');
      $anster.slideDown();
    }
  });
});

Answer 1

clickイベント内で.aを見つけたのと同じ要領で.fa-chevron-downのセレクタに引っかかる要素を取得し、downクラスを削除し、upクラスをaddすれば良いでしょう。

$(function() {
  $('.qa-set').click(function() {
    var $anster=$(this).find('.a')
    if ($anster.hasClass('open')) {
      $anster.removeClass('open');
      $anster.slideUp();
      // 閉じるときは'fa-chevron-up'を削除し'fa-chevron-down'を追加する
      $(this).find('i.fas.fa-chevron-up').removeClass('fa-chevron-up').addClass('fa-chevron-down');
    } else {
      $anster.addClass('open');
      $anster.slideDown();
      // 開くときは'fa-chevron-down'を削除し'fa-chevron-up'を追加する
      $(this).find('i.fas.fa-chevron-down').removeClass('fa-chevron-down').addClass('fa-chevron-up');
    }
  });
});

尚、私だったらメニュー開閉と同時にアイコンを180度回転させます。