Sets of collapsibles

jQuery Mobile will visually style a set of collapsibles as a group and will make the set behave like an accordion in that only one collapsible can be open at a time if you wrap the collapsibles in a div that has the attribute data-role="collapsibleset".

By default, all the collapsible sections will be collapsed. To set a section to be open when the page loads, add the data-collapsed="false" attribute to the heading of the section you want expanded.

<div data-role="collapsible-set">
 
  <div data-role="collapsible" data-collapsed="false">
    <h3>Section 1</h3>
    <p>I'm the collapsibleset content for section 1. My content is initially visible.</p>
  </div>
 
  <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>I'm the collapsibleset content for section 2.</p>
  </div>
 
</div>

Here is an example of a collapsibleset widget with 5 sections.

Non-inset collapsibleset widgets

For full width collapsibles without corner styling add the data-inset="false" attribute to the set.

Mini collapsibleset widgets

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

Custom icons

The icon displayed when a collapsible is shown or hidden can be overridden by using the data-collapsed-icon and data-expanded-icon attributes. Both the collapsibleset widget and the collapsible widget accepts these attributes. When you set one or both of these attributes on the collapsibleset widget all collapsible widgets that are part of the collapsibleset display the icon specified by the chosen value. You can override the icon displayed by individual collapsible widgets by setting one or both of these attributes on the collapsible widget itself.

Icon positioning

The default icon positioning for collapsible headings can be overridden by using the data-iconpos attribute. You can set the attribute either on the collapsibleset to affect all collapsibles in the set, or on an individual collapsible widget to affect only the one widget.

Theming collapsible content

The standard data-theme attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the data-content-theme attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsibleset widget.

<div data-role="collapsible-set" data-theme="b" data-content-theme="a">

Theming individual sections

To have individual sections in a group styled differently, add data-theme and data-content-theme attributes to specific collapsibles.

The collapsibleset widget does not require that the collapsibles it contains also be pre-rendered.

In the example below, pre-rendered markup for a collapsibleset is provided. The attribute data-corners="false" is explicitly specified, since the absence of the ui-corner-all class on the container element indicates that the "corners" widget option is to be false. One of the child collapsibles is provided as-is, while the other is pre-rendered.

<div data-role="collapsibleset" class="ui-collapsible-set" data-corners="false">
  <div data-role="collapsible">
    <h2>Child collapsible</h2>
    <p>This is the collapsible content.</p>
  </div>
  <div data-role="collapsible" data-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all" data-collapsed="false" data-corners="true">
    <h2 class="ui-collapsible-heading">
      <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-minus">
        Pre-rendered child collapsible
        <span class="ui-collapsible-heading-status">click to collapse contents</span>
      </a>
    </h2>
    <div class="ui-collapsible-content" aria-hidden="false">
      <p>This is the collapsible content.</p>
    </div>
  </div>
</div>