Jquery

Navigation Search 

AccordionsAPI 

An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.

Jump to section 

Markup

Collapsible sets start with the same markup as individual collapsibleswhich have a heading followed by the collapsible content. By adding a parent wrapper with a data-role="collapsible-set"attribute to the collapsibles they will be visually grouped and they will behave like an accordion so only one section can be open at a time.

Section 1click to expand contents 

Section 2click to expand contents 

Section 3click to expand contents 

View Source 

Return to top 

Inset vs. full width

For full width collapsibles without corner styling add the data-inset="false" attribute to the set. This makes the collapsible set look more like an expandable listview.

Animalsclick to expand contents 

Carsclick to expand contents 

Planetsclick to expand contents 

View Source 

Return to top 

Mini

For a more compact version that is useful in tight spaces, add the data-mini="true" attribute to the set.

I'm a mini collapsibleclick to expand contents 

I'm another miniclick to expand contents 

Last oneclick to expand contents 

View Source 

Return to top 

Icons

The default icons of collapsible headings can be overridden by using the data-collapsed-icon anddata-expanded-icon attributes, either at the collapsible-setlevel or on any of its collapsibles individually.

Icon set on the setclick to expand contents 

Icon set on the setclick to expand contents 

Icon set on this collapsibleclick to expand contents 

View Source 

Return to top 

Icon position

The default icon positioning of collapsible headings can be overridden by using the data-iconpos attribute, either at thecollapsible-set level or on any of its collapsibles individually.

Rightclick to expand contents 

Leftclick to expand contents 

Bottomclick to expand contents 

Topclick to expand contents 

View Source 

Return to top 

Corners

Add the data-corners="false"attribute to get an inset collapsible set without rounded corners.

Section 1click to expand contents 

Section 2click to expand contents 

Section 3click to expand contents 

View Source 

Return to top 

Theme

Add a data-theme attribute to the set to set the color of each collapsible header in a set. Add the data-content-theme attribute to specify the color of the collapsible content.

1 - Theme Aclick to expand contents 

2 - Theme Aclick to expand contents 

View Source 

To have individual sections in a group styled differently, add data-themeand data-content-themeattributes to specific collapsibles.

Section header, swatch Bclick to expand contents 

Section header, swatch Aclick to expand contents 

Section header, swatch Eclick to expand contents 

View Source 

Version 1.3.2

Copyright 2013 The jQuery Foundation