Collapsible set - jQuery Mobile Demos

##

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="collapsibleset"` 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 `collapsibleset` 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 `collapsibleset` 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
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

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

- ### Panel widget click to expand contents

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

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - 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
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

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

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

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

- ### Panel widget click to expand contents

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

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - 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
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

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