Collapse を特定して開閉アイコンを付けたい場合

Bootstrap を利用していて、ひとつのページ内に複数の Collapse を利用している場合、「この Collapse だけ開閉アイコンを付与したい」とか、「この Collapse だけ開閉アイコンを変えたい」というケースがあるかと思います。

しかも CSS だけで実現できると工数も削減できて好ましい。

そうした際の書式を下記にご案内します。

HTML

<p><a data-toggle="collapse" href="#collapse_A" aria-expanded="false" aria-controls="collapse_A" id="id-collapse">開閉用リンク A</a></p>
<div class="collapse" id="collapse_A">
開閉エリア A
</div>

<p><a data-toggle="collapse" href="#collapse_B" aria-expanded="false" aria-controls="collapse_B" id="id-collapse">開閉用リンク B</a></p>
<div class="collapse" id="collapse_B">
開閉エリア B
</div>

CSS

a#id-collapse[aria-expanded="false"]:after {
  margin-left: .5em;
  font-size:1.25em;
  font-family: fontAwesome;
  content: '\f0d7';
}

a#id-collapse[aria-expanded="true"]:after {
  margin-left: .5em;
  font-size:1.25em;
  font-family: fontAwesome;
  content: '\f0d8';
}

Collapse 画面サンプル

HTML で開閉用の data-toggle=”collapse” が付いた A タグに識別用の ID を指定してあげ、CSS ではその ID を起点にした書式を書いてあげると個別化が可能になります。

上記の場合、collapse が閉じている場合、開閉用リンクの後ろに Font-awesone の \f0d7 を表示し、開いた際には \f0d8 を表示します。