##

Demos

Menu Search

# Collapsibles

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-theme` attribute to set a theme for the collapsible, and the `data-content-theme` attribute to the wrapper and specify a theme swatch letter.

#### Heading

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

The collapsible content inherits a theme by default. Set `data-content-theme` to `false` to have no theme at all.

#### Heading

I'm the collapsible content without a theme.

## 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="carat-d"` and `data-expanded-icon="carat-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

## Pre-rendered markup

You can supply pre-rendered markup for any collapsible to save startup time. The example below illustrates the markup you have to provide for a pre-rendered collapsible.

#### Heading
click to expand contents

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

- 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