jQuery Mobile Collapsible

Collapsible content blocks

Collapsibles allow you to hide or show content - very useful for storing partial information.

To create a collapsible content block, assign the data-role="collapsible" attribute to a container. In the container (div), add a heading element (h1-h6) followed by any HTML markup you need to expand:

Example

<div data-role="collapsible">
  <h1>Click me - I can collapse!</h1>
  <p>I am collapsible content.</p>
</div>

Try it yourself

By default, the content is closed. To expand the content when the page loads, please use data-collapsed="false":

Example

<div data-role="collapsible" data-collapsed="false">
  <h1>Click me - I can collapse!</h1>
  <p>I am now default expanded.</p>
</div>

Try it yourself

Nested collapsible blocks

Collapsible content blocks can be nested:

Example

<div data-role="collapsible">
  <h1>Click me - I can collapse!</h1>
  <p>I am the content that is expanded.</p>
  <div data-role="collapsible">
    <h1>Click me - I am a nested collapsible block!</h1>
    <p>I am the content expanded within a nested collapsible block.</p>
  </div>
</div>

Try it yourself

Tip:Collapsible content blocks can be nested as many times as you wish.

Collapsible sets

Collapsible sets refer to a group of collapsible blocks (often called accordions) that are combined together. When a new block is opened, all other blocks will close.

Create several content blocks, then wrap the collapsible block with a new container using data-role="collapsible-set":

Example

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Click me - I can collapse!</h1>
    <p>I am the content that is expanded.</p>
  </div>
  <div data-role="collapsible">
    <h1>Click me - I can collapse!</h1>
    <p>I am the content that is expanded.</p>
  </div>
</div>

Try it yourself

More Examples

Remove rounded corners through the data-inset attribute
How to remove rounded corners from collapsibles.
Minimize collapsibles with data-mini
How to make collapsibles smaller.
Change icons with data-collapsed-icon and data-expanded-icon
How to change the icons of collapsibles (the default is + and -).