Bootstrap3
caret
collapse
三角のアレ
開閉パネル

BootStrap3でPanelをCollapseで折りたたみにした時にCSSだけでCaretを変更する

ブロック開閉時に上下が変わる三角のマークのことを「キャレット」っていうらしい。
BootStrap3のCollapseでPanelを開閉するのは簡単に実装。
開閉状態に合わせてキャレットの文字列を変更するやつを探すのが面倒だったので自分書いた方が早そうだった。
キャレット部分はボーダー使っても良かったけど、やっぱり面倒だったのでfont-awesomeで実装。
これならフォントの調整で位置とか大きさとかアレコレできるもんね。
「panel-caret」というクラスを作ってみる。

styles.css
.panel-caret:not(.collapsed)::after {
 content: "\f0d8";
 font-family: FontAwesome;
 color: #999;
 margin-left: 1em; 
}
.panel-caret.collapsed::after {
 content: "\f0da";
 font-family: FontAwesome;
 color: #999;
 margin-left: 1em; 
}
sample.html
<div class="panel panel-default " data-toggle="collapse" data-target="#sample-body" href="#sample-body">
  <div class="panel-heading">
    <h3 class="panel-caret panel-title collapsed" data-toggle="collapse" href="#sample-body" >リード文</h3>
  </div>
  <div id="sample-body" class="panel-body collapse">
    <p>中身</p>
  </div>
</div>

デフォルトではパネルは閉じた状態のままで、パネルが開くと「collapsed」クラスが該当箇所に付与される。
このクラスの有無で状態を確認する。
font-familyに「FontAwesome」をセットしたら、contentにUnicodeでキャレットのアップダウンを設定する。
ちなみにキャレットのコードは下記の通り。

  • fa-caret-up · Unicode: f0d8
  • fa-caret-down · Unicode: f0d7
  • fa-caret-right · Unicode: f0da
  • fa-caret-left · Unicode: f0d9