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.

Kickstart Your Career

Get certified by completing the course

Get Started