ベースのスタイルとアコーディオンやナビゲーションのような折畳み可能なコンポーネントのフレキシブルなサポートを取得します。
プラグインの依存関係：Collapse は、Bootstrap のバージョンに transitions プラグインがインクルードされていることを必要とします。
折畳みに関するチュートリアルは、Bootstrap Collapse チュートリアルご覧ください。
| クラス | 説明 | 例 |
|---|---|---|
| .collapse | コンテンツを隠す | Try it |
| .collapse in | コンテンツを表示する | Try it |
| .collapsing | トランジションが始まった時に追加され、終った時に削除される | Try it |
折り畳み可能な要素の制御を自動的に割り当てるため、要素に data-toggle="collapse" と data-target を追加します。 data-target 属性は、折畳みを適用する CSS セレクタを受け取ります。折り畳み可能な要素にクラス collapse を追加するようにしてください。 デフォルトで開きたい場合は、追加のクラス in を追加します。
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Try it Yourself »
チップ:アコーディオンのようなグループ管理を、collapsible コントロールに追加するには、 data 属性 data-parent="#selector" を追加します。
手動で有効にします：
$('.collapse').collapse()
オプションは、data 属性または JavaScript を介して渡すことができます。 data 属性については、data-parent=""のように data- の後へオプション名を追加します。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| parent | selector | false | この折り畳み可能な項目が表示されたとき、指定された parent の下にあるすべての折り畳み可能な要素は閉じられる。 （古典的なアコーディオンの動作に似ています - これはパネルクラスに依存します） - 下記の例を参照してください |
| toggle | boolean | true | 呼び出し時に折り畳み可能な要素を切り替える |
次の表は、使用できる全 collapse メソッドの一覧です。
| メソッド | 説明 | Try it |
|---|---|---|
| .collapse(options) | オプション付きで折畳み要素をアクティブにする。有効な値については、上記オプションを参照 | |
| .collapse("toggle") | 折畳み要素を切り替える | Try it |
| .collapse("show") | 折畳み要素を表示する | Try it |
| .collapse("hide") | 折畳み要素を隠す | Try it |
次の表は、使用できる全 collapse イベントの一覧です。
| イベント | 説明 | Try it |
|---|---|---|
| show.bs.collapse | 折畳み要素が表示されようとしているときに発生する | Try it |
| shown.bs.collapse | 折畳み要素が完全に表示されたときに発生する（CSS のトランジションが完了した後） | Try it |
| hide.bs.collapse | 折畳み要素が隠されようとしているときに発生する | Try it |
| hidden.bs.collapse | 折畳み要素が完全に隠されたときに発生する（CSS のトランジションが完了した後） | Try it |
次の例では、ボタンが他要素のコンテンツの展開と折畳みを切替えます：
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<div id="demo"
class="collapse in">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
Try it Yourself »
次の例は、折畳みパネルを示しています：
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<div
class="panel-body">Panel Body</div>
<div
class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Try it Yourself »
次は、内部にリストグループを持った折畳みパネルを示しています：
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<ul
class="list-group">
<li
class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Try it Yourself »
次の例は、パネルコンポーネントの拡張による、簡単なアコーディオンを示しています：
注: data-parent は、折畳み項目のいずれかが表示されたときに、
指定した親の下にあるすべての折畳み要素を閉じることを確認します。
<div class="panel-group" id="accordion">
<div class="panel
panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible
Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse
collapse in">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible
Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible
Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Try it Yourself »
次の例は、折畳みコンテンツを開いて閉じるときに、open/close のテキストとアイコンを変更します：
$(document).ready(function(){
$("#demo").on("hide.bs.collapse",
function(){
$(".btn").html('<span class="glyphicon
glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span
class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
Try it Yourself »
または、CSS が使用できます：
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content
is hidden */
.btn.collapsed:after {
content: "\e080";
}
Try it Yourself »