Accordions API
An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.
Jump to sectionMarkup
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="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.
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 collapsible-set 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 collapsible-set 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.