Collapsible set
An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.
Quick LinksMarkup
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.
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.
Mini
For a more compact version that is useful in tight spaces, add the data-mini="true"
attribute to the set.
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 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.
Corners
Add the data-corners="false"
attribute to get an inset collapsible set without rounded corners.
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.