HTMLとCSSでアコーディオン作成した際にアイコンを切り替えたいです。

###前提・実現したいこと
HTMLとCSSでアコーディオンを作成した際、クリックしてコンテンツが展開した時にアイコン（矢印を右から下向きへ）を切り替える仕様にしたいです。

<h3>で囲んでいるタイトルという部分をクリックしたら右向きになっているアイコンを下向きにして、展開してるというようにしたいです。

現状のソースに何を加えればいいのかご教示いただけましたら幸いです。
何卒お力添えのほどよろしくお願い致します。

###該当のソースコード

HTML
1<div class="panel panel-default">
2<a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse1" class="title-bar">
3 <div class="panel-heading" style="background-color: #800000; color: #fff;">
4  <h3 class="panel-title"><i class="fa fa-exclamation fa-fw"></i>タイトル<i class="fa fa-chevron-right ico" aria-hidden="true"></i></h3>
5 </div>
6</a>
7<div id="sampleAccordionCollapse1" class="panel-collapse collapse in">
8 <div class="panel-body">
9  <p>
10   テキストテキスト
11  </p>
12 </div>
13</div>
14</div>

###該当のソースコード

CSS
1.ico{
2 position: absolute;
3 right: 25px;
4}
5
6.title-bar:hover .ico:before{
7 font-family: 'FontAwesome';
8 content: '\f078';
9}

###補足情報(言語/FW/ツール等のバージョンなど)
ページ作成はBootstrapで作成しております。

m.ts10806

2017/08/02 02:52

Bootstrapはどのバージョンを利用されていますか？

tantalus

2017/08/02 02:55

mts10806様　ご連絡ありがとうございます。Bootstrap3でございます。

Lhankor_Mhy

2017/08/02 02:57

CSSだけだと難しそうな気がします。

tantalus

2017/08/02 03:08

Lhankor_Mhy様　ご連絡ありがとうございます。そもそも今の私の作り方だと難しそうですかね？中にはCSSのみで切り替えたりできるサイトなど作り方を掲載しているサイトなどもあったので、なんとかできるのかなと思っておりまして。。。

Lhankor_Mhy

2017/08/02 03:19

では、そのサイトのとおりひとまずやってみるのはいかがでしょうか。

tantalus

2017/08/02 03:24

Lhankor_Mhy様　確かに仰る通りですね！　ただ、そのサイトは作り方がBootstrapでなくて、私が作成しているもので可能なのか思案していたものでして。的確なアドバイスありがとうございます！

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

回答1件

ベストアンサー

動作確認できませんので、動いたらラッキー、ぐらいな感じでお試しいただけますと幸いです。

CSS
1.title-bar[aria-expanded="true"] .ico:before {
2	content: "\f078";
3}

投稿2017/08/02 03:44

Lhankor_Mhy

総合スコア36074

tantalus

2017/08/02 04:06

Lhankor_Mhy様どうもありがとうございます！クリックしたら無事に切替わりました！！本当にどうもありがとうございますm(__)m 自分なりにいただきました内容を調べてみたのですが、.title-bar[aria-expanded="true"]の部分は開閉の指示による命令なのでしょうか？ご迷惑かと思いますが、参考サイトなどお教え願えれば幸いです。とにかく、本当にありがとうございます。

Lhankor_Mhy

2017/08/02 04:28

http://bootstrap3.cyberlab.info/javascript/collapse-accordion.html ↑ここを見てみたところ、data-toggle="collapse"属性が付いている要素のaria-expanded属性がトグルの際にjavascriptにより変化していたので、それを参考にしました。あと、矢印については何のことなのか分からなかったので、fa-chevron-rightでググったところ、疑似要素でコントロールしてるのがわかりました。同様にfa-chevron-downでググったところ、下向き矢印の文字コードが分かったので、あのようなCSSになりました。

tantalus

2017/08/02 06:07

Lhankor_Mhy様ご連絡いただきましてありがとうございました。また、私の説明不足で余計な検索をさせてしまい申し訳ございませんでした。実装の説明と参考サイトまでお教えいただきましてありがとうございます。クリアになりました。この度は本当にありがとうございました。

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