Search within TutorialsPark

jQuery Mobile : Collapsible Content Blocks


Learn how to use jQuery Mobile Collapsible Block Events


jQuery Mobile: Collapsible Content Set

jQuery Mobile Collapsible Content set can be created using attribute data-role="collapsible-set" for the div container that encapsulates the Collapsible Set

Example: jQuery Mobile - Collapsible Content Set

Give it a TRY! » Note: The First Collapsible is open initially using the attribute data-collapsed="false"


jQuery Mobile: Collapsible Set Without Inset

To Create a Collapsible set which extends to full width of the display and without the enhancement of rounded corners use the attribute data-inset="false"

Syntax: jQuery Mobile Collapsible without Inset

Give it a TRY! » Note:The Collapsible now occupies the complete width.


jQuery Mobile: Collapsible Set Mini Version

A Minified Version of the Collapsible can be created using the attribute data-mini="true",

Syntax: jQuery Mobile Collapsible Set Mini Version

Give it a TRY! » Note:The mini version is useful is there is a lot other content on the page.


jQuery Mobile: Collapsible Content Icons

jQuery Mobile allows you to set custom icons for collapsibles, instead of the standard icons, using attribute data-collapsed-icon , data-expanded-icon for both the states of Collapsible

Syntax: jQuery Mobile Collapsible Content Icons

Give it a TRY! » Note:If nothing is specified, the default icons plus and minus are displayed.


jQuery Mobile: Collapsible Content Icon Position

The Default position of the Collapsible icons is on the left, how ever using the attribute data-iconpos , users can position the icons on the right, top and bottom as well

Syntax: jQuery Mobile Collapsible Content Icon Position

Give it a TRY! » Note: If the attribute is set on the collapsible-set container then all child elements inherit the property.


jQuery Mobile: Collapsible Content Themes

Just like all other widgets, the Collapsibles can be themed using the attribute data-theme, the default possible values are " a " i.e(white theme, default) and " b " i.e(dark theme).

Syntax: jQuery Mobile Collapsible Content Themes

Give it a TRY! » Note: Users can also apply custom themes using the application themeroller.