Bootstrapのアコーディオン（collapse）の開閉時にアイコンを変更させる(CSSだけでやっちゃう編)

BootstrapのCollapse（JavaScript · Bootstrap）は非常に便利なんだけど、開閉を意味する画像（＋やーの画像）を表示させたい時がある。でも、js書くのも辛い。そんなときは、CSSを駆使してササッと仕事終わらせちゃいましょう。

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>

<div class="collapse" id="collapseExample">
  <div class="well">
    ...開閉させたいコンテンツhere…
  </div>
</div>

a[aria-expanded="false"]:after {
  content: url("/images/plus.png");
}

a[aria-expanded="true"]:after {
  content: url("/images/minus.png");
}