Collapsible set

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

Quick Links

Markup

Collapsible sets start with the same markup as individual collapsibles which have a heading followed by the collapsible content. By adding a parent wrapper with a data-role="collapsibleset" 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 1 click to expand contents

Section 2 click to expand contents

Section 3 click to expand contents

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.

Animals click to expand contents

Cars click to expand contents

Planets click to expand contents

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 collapsible click to expand contents

I'm another mini click to expand contents

Last one click to expand contents

Top

Icons

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

Icon set on the set click to expand contents

Icon set on the set click to expand contents

Icon set on this collapsible click to expand contents

Top

Icon position

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

Right click to expand contents

Left click to expand contents

Bottom click to expand contents

Top click to expand contents

Top

Corners

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

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.

To have individual sections in a group styled differently, add data-theme and data-content-theme attributes to specific collapsibles.