Search within TutorialsPark

jQuery Mobile : Collapsible Content Blocks


Learn how to use jQuery Mobile to create Collapsible Content Blocks


jQuery Mobile: Creating Collapsible Content Blocks

jQuery Mobile can be used to create collapsible content Blocks , which are blocks of content with a header that can be toggled to close so that only the header part is visible.

These Collapsible Content Blocks look and perform the same function as accordion


jQuery Mobile: Creating a Single Collapsible Content Block

The way to create a collapsible content block is to use the attribute data-role="collapsible" within a div Element.

Clicking on the plus sign displays the content and replaces the plus sign with minus sign, denoting that the content can be collapsed again.

Example: jQuery Mobile - Collapsible Content Block

Give it a TRY! » Note: You can use any header for h1 to h6, or any other Element as well.


jQuery Mobile: Configuring Collapsible Block

jQuery Mobile specifies two types of data attributes which can be used to create collapsible blocks.

Table: jQuery Mobile - Data Attributes for Collapsible Blocks

CSS Class Columns
data-collapsed A value of true means the block is collapsed, a value of false means the block is displayed. Default Value is expanded.
data-content-theme To set the theme for the content area of the collapsible block.

jQuery Mobile: Setting Theme for the content area

In the demo below, we use data-theme attribute to apply theme to the header, while the attribute data-content-theme is used to style the collapsible block.

Syntax: jQuery Mobile Setting theme for content area

Give it a TRY! » Note:Different colors for header and content create a good contrast effect.


jQuery Mobile: Defining the Initial State of Collapsible Blocks

jQuery Mobile allows you to set the intial state of the collapsible blocks using the attribute data-collapsed

A value of true means the content is collapsed and only the header is visible, a value of false means only the content is visible.

Syntax: jQuery Mobile Defining the Initial State of Collapsible Blocks

Give it a TRY! » Note: The one with the attribute data-collapsed=false , is displayed initially.