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

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

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

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

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

HTML
CSS

サンプルページ

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

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