jQuery Mobile Collapsibles
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).
