##

Demos

Menu Search

# 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

- Menu
- Home
- Getting started
- Introduction
- Responsive Web Design
- Page Navigation
- Pages
- Single page
- Multi-page template
- Dialog page
- Navigation
- Linking pages
- PHP redirect demo
- Backbone RequireJS demo
- Transitions
- Themes
- Default theme
- Classic theme
- Buttons & Icons
- Buttons
- Icons
- Icons load script
- CSS Framework
- Grids
- Grids: buttons
- Grids: custom responsive
- Form field containers
- Form hide labels
- Events
- Swipe list items
- Swipe page navigation
- Widgets
- Loader
- Toolbar
- Toolbar: external
- Toolbar: fixed
- Toolbar: fixed external
- Toolbar: persistent
- Navbar
- Tabs
- Panel
- Panel: examples
- Panel: external
- Panel: fixed
- Panel: responsive
- Panel: styling
- Panel: swipe open
- Popup
- Popup: alignment
- Popup: arrow size
- Popup: dynamic
- Popup: iframe
- Popup: image scaling
- Popup outside multi-page
- Listview
- Listview: autocomplete
- Listview: autocomplete remote data
- Listview: autodividers selector
- Listview: responsive grid
- Listview: linkbar
- Collapsible
- Collapsible: dynamic
- Collapsible set
- Controlgroup
- Controlgroup: dynamic
- Table Column Toggle
- Table Column Toggle: example
- Table Column Toggle: heading groups
- Table Column Toggle: options
- Table Reflow
- Table Reflow: heading groups
- Table Reflow: stripes and strokes
- Table Reflow: custom styles
- Filterable
- Form Widgets
- Forms
- Textinput
- Input button
- Checkboxradio: checkbox
- Checkboxradio: radio
- Selectmenu
- Selectmenu: custom
- Selectmenu: custom with filter
- Slider
- Slider: flip toggle switch
- Slider: tooltip
- Rangeslider
- Flipswitch
- Showcase
- Map geolocation demo
- Map list toggle demo

- Getting started
- Introduction
- Responsive Web Design
- Page Navigation
- Pages
- Single page
- Multi-page template
- Dialog page
- Navigation
- Linking pages
- PHP redirect demo
- Backbone RequireJS demo
- Transitions
- Themes
- Default theme
- Classic theme
- Buttons & Icons
- Buttons
- Icons
- Icons load script
- CSS Framework
- Grids
- Grids: buttons
- Grids: custom responsive
- Form field containers
- Form hide labels
- Events
- Swipe list items
- Swipe page navigation
- Widgets
- Loader
- Toolbar
- Toolbar: external
- Toolbar: fixed
- Toolbar: fixed external
- Toolbar: persistent
- Navbar
- Tabs
- Panel
- Panel: examples
- Panel: external
- Panel: fixed
- Panel: responsive
- Panel: styling
- Panel: swipe open
- Popup
- Popup: alignment
- Popup: arrow size
- Popup: dynamic
- Popup: iframe
- Popup: image scaling
- Popup outside multi-page
- Listview
- Listview: autocomplete
- Listview: autocomplete remote data
- Listview: autodividers selector
- Listview: responsive grid
- Listview: linkbar
- Collapsible
- Collapsible: dynamic
- Collapsible set
- Controlgroup
- Controlgroup: dynamic
- Table Column Toggle
- Table Column Toggle: example
- Table Column Toggle: heading groups
- Table Column Toggle: options
- Table Reflow
- Table Reflow: heading groups
- Table Reflow: stripes and strokes
- Table Reflow: custom styles
- Filterable
- Form Widgets
- Forms
- Textinput
- Input button
- Checkboxradio: checkbox
- Checkboxradio: radio
- Selectmenu
- Selectmenu: custom
- Selectmenu: custom with filter
- Slider
- Slider: flip toggle switch
- Slider: tooltip
- Rangeslider
- Flipswitch
- Showcase
- Map geolocation demo
- Map list toggle demo