Bootstrap3 Collapseの使い方

Bootstrap3のCollapseの使い方について書きます。

まず、Collapseの読み方は「コラップス」です。コラプスでもコラプセでもコラッタでもありません。

Collapseとは、いわゆる、アコーディオンパネルのことです。

さて、早速実装していきます。めちゃ簡単です。

まずは、クリックすることになるタイトル部分

<a data-toggle="collapse" data-parent="#accordion" href="#sample">
 タイトル
 </a>

〜説明〜
data-toggle : Collapseを起動させる
data-parent : アコーディオン風に閉じたり開いたりするためのもの
href : 指定した場所のパネルを開く→表示するboxのid名を挿れる

表示するbox（パネル）部分

<div class="collapsing collapse" id="sample">
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

classに下記のものを必要に応じて指定する
.collapse hides content
→表示するboxがデフォルで隠れている
.collapsing is applied during transitions
→トランシジョンを設定する
.collapse.in shows content
→表示するboxデフォルトで表示されている

まとめ

<div class="col-md-12" id="accordion">
<a data-toggle="collapse" data-parent="#accordion" href="#sample">
 タイトル
 </a>
<div class="collapsing collapse" id="sample">
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

以上!!!

サンプル作ったので、あとは、そっちを見てちょ☆( ^ω^ )☆

サンプル

コーポレートサイトのFAQとかによく使われるので、必要な際は是非!!

それでは、アディオス♪