jQuery Mobile - Collapsible
Collapsibles are the basic and easy widget to display short content. Following table lists the collapsible types used in jQuery Mobile.
| Sr.No. | Collapsible type & Description |
|---|---|
| 1 | Basic collapsible
Collapsible block of content can be created using data-role = "collapsible" attribute to a container. |
| 2 | Theme
To set a collapsible theme, you can use data-theme attribute and add data-content-theme attribute with a theme swatch letter specified. |
| 3 | Expanded
It enables you to expand the collapsible content on page load using data-collapsed attribute and setting it to false. |
| 4 | Mini sized
It can be used whenever you need a compact version of collapsible. This can be achieved by using data-mini and setting to true. |
| 5 | Icons
The collapsible heading's default icons can be overriden by using data-collapsed-icon and data-expanded-icon attributes. |
| 6 | Icon positioning
The collapsibe heading's default icon positioning can be overridden by using data-iconpos attribute. |
| 7 | Legend
You can display form elements in collapsible by using a fieldset and legend. |
| 8 | Non-inset collapsible
To remove inset appearance and to display the collapsible to its full width without corner styling, you can add the data-inset = "false" attribute. |
| 9 | Set of individual collapsibles
You can apply a series of individual collapsibles and it allows you to open multiple rows at once. |
| 10 | Pre-rendered markup
To improve the load time of your page, you can provide pre-rendered markup for collapsible by adding data-enhanced attribute and setting it to true. |