WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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 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 »