Jquery Mobile : Collapsible set

Collapsible set (accordion)

• Basics
• Options
• Methods
• Events

Collapsible sets start with the exact same markup as individual collapsibles. By adding a parent wrapper with a data-role="collapsible-set" attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the data- attribute reference to see all the possible attributes you can add to collapsible sets.

By default, all the 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 collapsible set content for section B.</p>
 </div>
 
 <div data-role="collapsible">
 <h3>Section 2</h3>
 <p>I'm the collapsible set content for section B.</p>
 </div>
 
</div>
 

Here is an example of a collapsible set with 5 sections.

Section 1click to collapse contents 

I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the data-collapsed="false"attribute.

Section 2click to expand contents 

Section 3click to expand contents 

Section 4click to expand contents 

Section 5click to expand contents 

Mini collapsible sets

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

Section 1click to expand contents 

Section 2click to expand contents 

Section 3click to expand contents 

Custom icons

Collapsible headings’ default icons can be overridden by using the data-collapsed-icon and data-expanded-icon attributes, either at the collapsible-set level or on an individual collapsible basis.

Section 1click to expand contents 

Section 2click to expand contents 

Section 3click to expand contents 

Icon positioning

Collapsible headings’ default icon positioing can be overridden by using the data-iconpos attribute, either at the collapsible-setlevel or on an individual collapsible basis.

Section 1click to expand contents 

Section 2click to expand contents 

Section 3click to expand contents 

Section 4click to expand contents 

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 collapsible set.

  
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">

Section 1click to expand contents 

Section 2click to expand contents 

Section 3click to expand contents 

Theming individual sections

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

Section header, swatch Bclick to expand contents 

Section header, swatch Aclick to expand contents 

Section header, swatch E