FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

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 »

Examples

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