jQuery Mobile Collapsibles

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Collapsibles

« Previous
Next Chapter »

## Collapsible Content Blocks

Collapsibles allow you to hide or show content - 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 element (H1-H6), 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:

## 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="collapsible-set" around the collapsible blocks:

## Example

<div data-role="collapsible-set">
<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

Remove rounded corner with the data-inset attribute
How to remove rounded corners 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 -).

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE