Collapsible set

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

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="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 1

I'm the collapsible content for section 1

Section 2

I'm the collapsible content for section 2

Section 3

I'm the collapsible content for section 3

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

  • Cats
  • Dogs
  • Lizards
  • Snakes

Cars

  • Acura
  • Audi
  • BMW
  • Cadillac

Planets

  • Earth
  • Jupiter
  • Mars
  • Mercury

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

This is good for tight spaces.

I'm another mini

Here's some collapsible content.

Last one

Final bit of collapsible content.

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 set on the set

Specify the open and close icons on the set to apply it to all the collapsibles within.

Icon set on the set

This collapsible also gets the icon from the set.

Icon set on this collapsible

The icons here are applied to this collapsible specifically, thus overriding the set icons.

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.

Right

Inherits icon positioning from data-iconpos="right" attribute on set.

Left

Set via data-iconpos="left" attribute on the collapsible

Bottom

Set via data-iconpos="bottom" attribute on the collapsible

Top

Set via data-iconpos="top" attribute on the collapsible

Corners

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

Section 1

Collapsible content

Section 2

Collapsible content

Section 3

Collapsible content

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.

Heading

Content

Heading

Content

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

Heading

Content

Heading

Content

Heading

Content