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

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

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

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

Farm animals

Wild Animals

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.

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