- jQuery Mobile Tutorial
- jQuery Mobile - Home
- jQuery Mobile - Overview
- jQuery Mobile - Setup
- jQuery Mobile - Pages
- jQuery Mobile - Icons
- jQuery Mobile - Transitions
- jQuery Mobile - Layouts
- jQuery Mobile - Widgets
- jQuery Mobile - Events
- jQuery Mobile - Forms
- jQuery Mobile - Themes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Data Attributes
- jQuery Mobile Useful Resources
- jQuery Mobile - Interview Questions
- jQuery Mobile - Quick Guide
- jQuery Mobile - Useful Resources
- jQuery Mobile - Discussion
jQuery Mobile - Collapsible Set
Description
In jQuery Mobile an accordion can be created by putting a series of separate collapsible into set.
The below table lists different types of collapsible set used in jQuery Mobile −
| Sr.No. | Collapsible set type & Description |
|---|---|
| 1 | Markup
The collapsibles set can be created with the same markup as basic collapsible. Adding data-role = "collapsibleset" attribute will make it a collapsible set. |
| 2 | Inset vs. full width
To create a full width collapsible without styling the corners, add data-inset attribute and set to false. |
| 3 | Mini
Whenever you want a compact version of a set of collapsible, add data-mini attribute and set it to true. |
| 4 | Icons
To override the default heading icons, add data-collapsed-icon and data-expanded-icon attributes at collapsibleset level or on whichever of its collapsibles. |
| 5 | Icon position
To override the default icon position, use the data-iconpos attribute at collapsibleset level or on whichever of its collapsibles. |
| 6 | Corners
To get an inset collapsible set without rounded corner styling just add data-corners attribute and set to false. |
| 7 | Theme
The color of each collapsible header can be set by adding a data-theme attribute to the collapsible set. |