質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1458閲覧

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

raid-23

総合スコア5

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/05/18 15:57

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

HTML

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

CSS

1.q { 2 font-size: 20px; 3 padding: 20px; 4 border: 1px solid #e5e5e5; 5 border-radius: 5px 5px 0 0; 6 cursor: pointer; 7 margin-bottom: 5px; 8 line-height: 1.3; 9} 10.q:hover { 11 text-decoration: underline black; 12} 13.a { 14 font-size: 16px; 15 padding: 20px; 16 margin-bottom: 10px; 17 display: none; 18} 19 20.fa-question-circle { 21 color: #016ea9; 22} 23i.fa-chevron-down { 24 color: #e5e5e5; 25 float: right; 26 line-height: unset; 27}

javascript

1$(function() { 2 $('.qa-set').click(function() { 3 var $anster=$(this).find('.a') 4 if ($anster.hasClass('open')) { 5 $anster.removeClass('open'); 6 $anster.slideUp(); 7 } else { 8 $anster.addClass('open'); 9 $anster.slideDown(); 10 } 11 }); 12});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

javascript

1$(function() { 2 $('.qa-set').click(function() { 3 var $anster=$(this).find('.a') 4 if ($anster.hasClass('open')) { 5 $anster.removeClass('open'); 6 $anster.slideUp(); 7 // 閉じるときは'fa-chevron-up'を削除し'fa-chevron-down'を追加する 8 $(this).find('i.fas.fa-chevron-up').removeClass('fa-chevron-up').addClass('fa-chevron-down'); 9 } else { 10 $anster.addClass('open'); 11 $anster.slideDown(); 12 // 開くときは'fa-chevron-down'を削除し'fa-chevron-up'を追加する 13 $(this).find('i.fas.fa-chevron-down').removeClass('fa-chevron-down').addClass('fa-chevron-up'); 14 } 15 }); 16});

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

投稿2021/05/18 16:37

hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問