##

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

- Home

- ### Getting started

  - Introduction
  - Responsive Web Design

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Transitions
  - Loader

- ### Events

  - Swipe list items
  - Swipe page navigation

- ### Theme

  - Default theme
  - Classic theme
- Buttons

- ### Icons

  - Icons
  - Icons load script

- ### Toolbars

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - AJAX optimized toolbars
  - Form in toolbar
  - Navbar widget
- Tabs

- ### Panels

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popups

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page

- ### Collapsibles

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Listviews

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid

- ### Tables

  - Table Column Toggle
  - Table Column Toggle demo
  - 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

- ### Forms

  - Forms
  - Forms gallery
  - Forms disabled
  - Field containers
  - Hide labels
  - Textinput
  - Input button
  - Checkboxes
  - Radio buttons
  - Selectmenu
  - Custom select menu
  - Custom select menu with filter
  - Slider
  - Slider flip toggle switch
  - Slider tooltip
  - Rangeslider
  - Flipswitch

- ### Controlgroups

  - Controlgroup
  - Dynamic controlgroups

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids

- ### 3rd party API

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home

- ### Getting started

  - Introduction
  - Responsive Web Design

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Transitions
  - Loader

- ### Events

  - Swipe list items
  - Swipe page navigation

- ### Theme

  - Default theme
  - Classic theme
- Buttons

- ### Icons

  - Icons
  - Icons load script

- ### Toolbars

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - AJAX optimized toolbars
  - Form in toolbar
  - Navbar widget
- Tabs

- ### Panels

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popups

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page

- ### Collapsibles

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Listviews

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid

- ### Tables

  - Table Column Toggle
  - Table Column Toggle demo
  - 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

- ### Forms

  - Forms
  - Forms gallery
  - Forms disabled
  - Field containers
  - Hide labels
  - Textinput
  - Input button
  - Checkboxes
  - Radio buttons
  - Selectmenu
  - Custom select menu
  - Custom select menu with filter
  - Slider
  - Slider flip toggle switch
  - Slider tooltip
  - Rangeslider
  - Flipswitch

- ### Controlgroups

  - Controlgroup
  - Dynamic controlgroups

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids

- ### 3rd party API

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle