# jQuery Mobile

Navigation Home

# Accordions API

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

## Markup

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.

### 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 1

## 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 sollapsible content.

### Last one

Final bit of collapsible content.

## Icons

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.

### 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 in on this collapsible which overrides the set icons.

## Icon position

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.

### Right

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

### Left

Set via `data-iconpos="left"` attribute on the collspaible

### Bottom

Set via `data-iconpos="bottom"` attribute on the collspaible

### Top

Set via `data-iconpos="top"` attribute on the collspaible

## Corners

Add the `data-corners="false"` attribute to have 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 select the color of each collapsible header in a set. Add the `data-content-theme` attribute to specify the color of the collapsible content.

### 1 - Theme A

Content theme A

### 2 - 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.

### Section header, swatch B

Collapsible content, swatch "b"

### Section header, swatch A

Collapsible content, swatch "a"

### Section header, swatch E

Collapsible content, swatch "d"