#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icon
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working?
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Apps
- How do I need to configure PhoneGap/Cordova?

# Accordions API

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.

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