jQuery Mobile Collapsible Blocks
Collapsible Content Blocks
Collapsible blocks allow you to hide or show content - useful for storing some information.
To create a collapsible content block, add the data-role="collapsible" attribute to the container. Inside the container (div), add a heading element (H1-H6), followed by the HTML markup you want to expand:
Example
<h1>Click me - I can collapse!</h1>
<p>I am collapsible content.</p>
</div>
Try it Yourself »
By default, the content is collapsed. To expand the content when the page loads, use data-collapsed="false":
Example
<h1>Click me - I can collapse!</h1>
<p>I'm now expanded by default.</p>
</div>
Try it Yourself »
Nested Collapsible Blocks
Collapsible content blocks can be nested inside each other:
Example
<h1>Click me - I can collapse!</h1>
<p>I am the expanded content.</p>
<div data-role="collapsible">
<h1>Click me - I am a nested collapsible block!</h1>
<p>I am the expanded content inside the nested collapsible block.</p>
</div>
</div>
Try it Yourself »
 |
Collapsible content blocks can be nested as many times as you need. |
|---|
Collapsible Sets
A collapsible set combines collapsible blocks together (like an accordion). When a new block is expanded, all other blocks are collapsed.
Create several collapsible content blocks, and then wrap the collapsible content blocks in a new container with data-role="collapsible-set":
Example
<div data-role="collapsible">
<h1>Click me - I can collapse!</h1>
<p>I am the expanded content.</p>
</div>
<div data-role="collapsible">
<h1>Click me - I can collapse!</h1>
<p>I am the expanded content.</p>
</div>
</div>
Try it Yourself »
More Examples
Remove Rounded Corners and Margins with the data-inset Attribute
How to remove the rounded corners and margins from collapsible blocks.
Miniaturize Collapsible Blocks with the data-mini Attribute
How to make collapsible blocks smaller.
Change Icons with data-collapsed-icon and data-expanded-icon
How to change the icons of collapsible blocks (default is + and -).
Using Collapsibles in Popups
Create collapsible items in a popup.
Modify Icon Position
How to modify the position of the icon in collapsible items (default is on the left).