大量のコンテンツを隠したり、表示したりしたいときには折畳みが便利です：
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div>
Try it Yourself »
.collapse クラスは、折畳み可能な要素（この例では <div>）を示します；
これは、ボタンのクリックで表示されたり隠されたりするコンテンツです。
折りたたみ可能なコンテンツを制御（表示/非表示）するために、<a> または <button> 要素に
data-toggle="collapse" 属性を追加します。
次に、ボタンと折畳むコンテンツ（<div id="demo">）を接続するために、
data-target="#id" 属性を追加します。
注: <a> 要素には、data-target 属性の代わりに、
href 属性を使用できます：
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div>
Try it Yourself »
デフォルトでは、折畳み用のコンテンツは表示されませんが、デフォルトでコンテンツを表示するようにするため、
.in クラスを追加することが可能です：
次の例は、折畳みパネルを示しています：
<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 »
すべての collapse オプション、メソッド、イベントの完全なリファレンスについては、 Bootstrap JS Collapse リファレンスをご覧ください。