THE WORLD'S LARGEST WEB DEVELOPER SITE

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).