##

Demos

Menu Search

# Collapsible

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.

- 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