Easy Tutorial
Jquerymobile Pages Event Pageload Jquerymobile Grids Jquerymobile List Views Jquerymobile Events Page Jquerymobile Popups Event Pagebeforeshow Event Pagebeforehide Jquerymobile Events Scroll Jquerymobile Tutorial Jquerymobile List Content Jquerymobile Tables Jquerymobile Install Jquerymobile Themes Jquerymobile Collapsibles Jquerymobile Navbars Event Pageinit Event Pagebeforecreate Event Pagecreate Jquerymobile Ref Data Jquerymobile Ref Css Event Scrollstop Jquerymobile Panels Event Pagecontainerload Event Pagecontainerloadfailed Jquerymobile Form Basic Jquerymobile Transitions Event Swipeleft Jquerymobile Ref Icons Jquerymobile Events Event Pagebeforeload Jquerymobile Form Select Jquerymobile Icons Event Pageshow Jquerymobile Form Sliders Event Swiperight Event Pagehide Jquerymobile Events Touch Jquerymobile Toolbars Jquerymobile Events Orientation Event Swipe Jquerymobile Intro Jquerymobile Buttons Event Taphold Event Tap Jquerymobile Ref Events Event Scrollstart Jquerymobile Form Inputs Event Pageloadfailed Event Pagecontainerbeforeload Jquerymobile Examples Jquerymobile Filters Event Orientationchange
❮ Jquerymobile Themes Jquerymobile Navbars ❯

jQuery Mobile Collapsible Block

Collapsible Content Block

Collapsible blocks allow you to hide or show content - useful for storing partial information.

To create a collapsible content block, add the data-role="collapsible" attribute to the container. Inside the container (div), add a header element (H1-H6), followed by the HTML markup you want to expand:

Example data-role="collapsible"

By default, the content is collapsed. To expand the content on page load, use data-collapsed="false":

Example data-role="collapsible" data-collapsed="false"

Nested Collapsible Blocks

Collapsible content blocks can be nested within each other:

Example data-role="collapsible" > data-role="collapsible"

| | Collapsible content blocks can be nested multiple times as needed. | | --- | --- |

Collapsible Set

A collapsible set groups collapsible blocks together (like an accordion). When a new block is expanded, all other blocks are collapsed.

Create several collapsible content blocks and then enclose them with a new container that has data-role="collapsible-set":

Example data-role="collapsible-set"

More Examples

Remove rounded corners and margins with the data-inset attribute

Minimize collapsible blocks with the data-mini attribute

Change icons with data-collapsed-icon and data-expanded-icon

Using collapsible in a popup

Modify icon position

❮ Jquerymobile Themes Jquerymobile Navbars ❯