Collapseはボタンやテキストリンクで開閉するコンテンツを作れる便利なコンポーネント。使いどころとしてはメニューの開閉やQ&Aなどのコンテンツの開閉などです。
パネルを使うことでアコーディオンタイプにすることができ、開いているメニューを閉じつつ閉じているメニューを開くといったインタラクティブなエフェクトを付け加えることもできます。
Bootstrap3 Collapseの使い方
Collapseコンポーネントの基本的な構造は、開閉ボタンとコンテンツの2つ。コンテンツの方にはclassにcollapse
と付けるだけでOK。ボタンの方はdata-toggle
とdata-target
の2つが必要です。data-target
の方は開閉したいコンテンツのidかclass名と紐付ける必要があるので注意。
あと、開閉ボタンはボタンではなく、テキストリンクでも可能です。その場合data-target
はhref
で代用できるので覚えておきましょう。テキストリンクを使うことでメニューの開閉が可能になります。
Class名 | 概要 |
---|---|
data-toggle="collapse" |
開閉ボタンに必要 |
data-target="#demo" |
開閉ボタンに必要、開閉するコンテンツと紐付ける |
.collapse |
コンテンツが閉じた状態 |
.collapsing |
トランジションが発生している状態 |
.collapse.in |
コンテンツが見えている状態 |
<!--
data-toggle : Collapseを起動させる
data-target : ここで指定したid(classでも可)とボタンを紐づける
-->
<button type="button" class="btn btn-default btn-sm" data-toggle="collapse" data-target="#demo">
ボタンで開閉
</button>
<!--
id : ボタンと紐付いたid、classでも可
.collapse : コンテンツを隠す
.collapse.in : コンテンツを開いた状態
-->
<div id="demo" class="collapse">
<h3>アコーディオンの中身</h3>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>
Collapseをアコーディオンパネル風に使う方法
先ほどはボタンを使ってコンテンツを開閉しましたが、Webサイトでよく見かけるアコーディオンタイプのCollapseパネルを作ることもできます。
構造は少し複雑になっていますが、先ほどのボタンにあったdata-target
がaタグのhref
に置き換わり、#accordion
という名前のidをつけたpanel-group
で囲んであげるだけです。
アコーディオン風に開いてるパネルを自動で閉じるには、data-parent
が必要になるので忘れず追加しましょう。
Class名 | 概要 |
---|---|
data-toggle="collapse" |
開閉ボタンに必要 |
data-parent="#accordion" |
アコーディオンを作る時に必要、親要素のidと紐付ける |
href="#collapseOne" |
開閉するコンテンツと紐付ける |
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
コンテンツ1のトグルボタン
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
コンテンツ1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
コンテンツ2のトグルボタン
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
コンテンツ2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
コンテンツ3のトグルボタン
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
コンテンツ3
</div>
</div>
</div>
</div>
Collapse.jsの使い方
Collapseの開閉操作をjavascriptで制御することもできます。
function名 | 概要 |
---|---|
.collapse(‘toggle’) |
閉じたり開いたり |
.collapse(‘show’) |
開く |
.collapse(‘hide’) |
閉じる |
//クリックしたらイベント発動
$('.toggle-btn').click(function () {
//指定したidを閉じたり開いたり
$('.collapse-content').collapse('toggle');
});
また、各動作ごとにイベントハンドラも用意されています。対象のコンテンツが開いたり閉じたりした時に使えます。
function名 | 概要 |
---|---|
show.bs.collapse |
showメソッドが呼ばれたときに発動 |
shown.bs.collapse |
開き終わったら発動 |
hide.bs.collapse |
hideメソッドが呼ばれたときに発動 |
hidden.bs.collapse |
閉じ終わったら発動 |
// 開き終わったらテキスト書き換え
$('.collapse-content').on('shown.bs.collapse', function () {
$(this).text('開き終わりました');
});