Collapsible Content Blocks
Collapsibles allow you to hide or show content, which is useful for storing parts of information.
To create a collapsible block of content, assign the data-role="collapsible" attribute to a container. Inside the container (div), add a header (H1-H6) or legend element, followed by any HTML markup you want to be expanded:
Example
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Try it Yourself »By default, the content is closed. To expand the content when the page loads, use data-collapsed="false":
Example
<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 »Nested Collapsible Blocks
Collapsible content blocks can be nested (a collapsible inside a collapsible):
Example
<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 »Collapsible content blocks can be nested as many times as you want.
Collapsible Sets
Collapsible sets are collapsible blocks that are grouped together (often referred to as an accordion). When a new block is opened, all other blocks close.
Create several collapsible content blocks, and then wrap a new container with the data-role="collapsibleset" around the collapsible blocks:
Example
<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 »More Examples
Collapsible popup
How to create a collapsible popup.
Remove rounded corner with the data-inset attribute
How to remove rounded corners and add full width on collapsibles.
Minify collapsibles with the data-mini attribute
How to make collapsibles smaller.
Changing the icon with data-collapsed-icon and data-expanded-icon
How to change the icon of collapsibles (default is + and -).
Changing the icon position
How to change the icon position of collapsibles (default is left).