折畳みを使用すると、コンテンツの非表示や表示が可能になり、情報の一部を用意しておくのに便利です。
折畳み可能なコンテンツブロックを作成するには、コンテナに data-role="collapsible" 属性を割り当てます。 コンテナ（div）内には、ヘッダー（H1〜H6）や legend 要素を追加し、展開する HTML マークアップを追加します：
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Try it Yourself »デフォルトでは、コンテンツは閉じられています。 ページをロードしたときに、コンテンツが展開されているようにするには、data-collapsed="false" を使用します：
<div data-role="collapsible" data-collapsed="false">
<h1>Click me - I'm collapsible!</h1>
<p>I'm now expanded by default.</p>
</div>
Try it Yourself »折畳み可能なコンテンツブロックは、入れ子にすることができます（折畳み内部の折畳み）：
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div data-role="collapsible">
<h1>Click me - I'm a nested collapsible block!</h1>
<p>I'm the expanded content in the nested collapsible block.</p>
</div>
</div>
Try it Yourself »折畳み可能なコンテンツブロックは、必要な回数だけネストすることができます。
折畳み可能なセットは、グループ化された折畳み可能なブロックです（多くはアコーディオンと呼ばれます）。 新しいブロックが開かれると、他のすべてのブロックが閉じられます。
折畳む複数のコンテンツブロックを作成し、そのブロックの周りを data-role="collapsibleset" を持つ新しいコンテナでラップします：
<div data-role="collapsibleset">
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
</div>
Try it Yourself »
折畳み可能なポップアップ
折畳み可能なポップアップを作成する方法。
data-inset 属性で角丸を削除する
角丸コーナーを削除し、折畳みに幅全体を追加する方法。
data-mini 属性で 折畳みを縮小する
折畳みを小さくする方法。
data-collapsed-icon と data-expanded-icon でアイコンを変更する
折畳みアイコンを変更する方法（デフォルトは + と -）。
アイコンの位置を変更する
折畳みアイコンの位置を変更する方法（デフォルトは左）。