An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set. Jump to section
Collapsible sets start with the same markup as individual collapsibles which has a heading followed by the collapsible content. By adding a parent wrapper with a data-role="collapsible-set"
attribute the collapsibles, they will be visually grouped and behave like an accordion so only one section can be open at a time.
I'm the collapsible content for section 1
I'm the collapsible content for section 2
I'm the collapsible content for section 1
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.
For a more compact version that is useful in tight spaces, add the data-mini="true"
attribute to the set.
This is good for tight spaces.
Here's some sollapsible content.
Final bit of collapsible content.
Collapsible headings’ default icons can be overridden by using the data-collapsed-icon
and data-expanded-icon
attributes, either at the collapsible-set
level or on an individual collapsible basis.
Specify the open and close icons on the set to apply it to all the collapsibles within.
This collapsible also gets the icon from the set.
The icons here are in on this collapsible which overrides the set icons.
Collapsible headings’ default icon positioning can be overridden by using the data-iconpos
attribute, either at the collapsible-set
level or on an individual collapsible basis.
Inherits icon positioning from data-iconpos="right"
attribute on set.
Set via data-iconpos="left"
attribute on the collspaible
Set via data-iconpos="bottom"
attribute on the collspaible
Set via data-iconpos="top"
attribute on the collspaible
Add the data-corners="false"
attribute to have an inset collapsible set without rounded corners.
Collapsible content
Collapsible content
Collapsible content
Add a data-theme
attribute to the set to select the color of each collapsible header in a set. Add the data-content-theme
attribute to specify the color of the collapsible content.
Content theme A
Content theme A
To have individual sections in a group styled differently, add data-theme
and data-content-theme
attributes to specific collapsibles.
Collapsible content, swatch "b"
Collapsible content, swatch "a"
Collapsible content, swatch "d"