読者です 読者をやめる 読者になる 読者になる

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");
}