#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons
- 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
- Reflow: Refresh method
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle: Refresh method
- 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?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?

# Collapsibles API

Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content.

## Basic collapsible

To create a collapsible block of content, create a container and add the `data-role="collapsible"` attribute. Directly inside this container, add any header (H1-H6) or legend element. The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable. After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.

#### Heading

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

## Theme

Add the `data-content-theme` attribute to set a theme for the content of the collapsible. To provide a stronger visual connection between the collapsible header and content, add the `data-content-theme` attribute to the wrapper and specify a theme swatch letter. This applies the swatch's border and flat background color (not the gradient) to the content block, removes the rounded corners from the bottom of the header, and gives the bottom of the content block rounded corners to visually group these elements.

#### Heading

I'm the collapsible content with a themed content block set to "d".

## Expanded

To expand the content when the page loads, add the `data-collapsed="false"` attribute to the wrapper.

#### Heading

- List item 1
- List item 2
- List item 3

## Mini sized

For a more compact version that is useful in toolbars and tight spaces, add the `data-mini="true"` attribute to the element to create a mini version.

#### Heading

- List item 1
- List item 2
- List item 3

## Icons

The default icons of collapsible headings can be overridden by using the `data-collapsed-icon` and `data-expanded-icon` attributes. In the example below, `data-collapsed-icon="arrow-d"` and `data-expanded-icon="arrow-u"`.

#### Heading

- Read-only list item 1
- Read-only list item 2
- Read-only list item 3

## Icon positioning

The default icon positioning of collapsible headings can be overridden by using the `data-iconpos` attribute. In the below case, `data-iconpos="right"`.

### I'm a header

`data-iconpos="right"`

## Legend

For forms, use a `fieldset` and `legend` for the collapsible.

Legend Text Input:
One Two Three

## Non-inset collapsible

By default collapsibles have an inset appearance. To make them full width without corner styling add the `data-inset="false"` attribute to the element.

#### Heading

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

## Set of individual collapsibles

This is an example of a series of individual collapsibles. The difference with a "Collapsible Set" is that multiple collapsible rows can be open at once.

### Pets

- Canary
- Cat
- Dog
- Gerbil
- Iguana
- Mouse

### Farm animals

- Chicken
- Cow
- Duck
- Horse
- Pig
- Sheep

### Wild Animals

- Aardvark
- Alligator
- Ant
- Bear
- Beaver
- Cougar
- Dingo

To avoid "double" borders the framework removes the top border of collapsibles that are immediately preceded by another collapsible. Here we show how to negate this with custom CSS.

### Pets

- Canary
- Cat
- Dog
- Gerbil
- Iguana
- Mouse

### Farm animals

- Chicken
- Cow
- Duck
- Horse
- Pig
- Sheep