jQuery Mobile - Collapsible

Collapsible block of content can be created using data-role = "collapsible" attribute to a container.

To set a collapsible theme, you can use data-theme attribute and add data-content-theme attribute with a theme swatch letter specified.

It enables you to expand the collapsible content on page load using data-collapsed attribute and setting it to false.

It can be used whenever you need a compact version of collapsible. This can be achieved by using data-mini and setting to true.

The collapsible heading's default icons can be overriden by using data-collapsed-icon and data-expanded-icon attributes.

The collapsibe heading's default icon positioning can be overridden by using data-iconpos attribute.

You can display form elements in collapsible by using a fieldset and legend.

To remove inset appearance and to display the collapsible to its full width without corner styling, you can add the data-inset = "false" attribute.

You can apply a series of individual collapsibles and it allows you to open multiple rows at once.

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.