Jquery Mobile Basic Html Style: Collapsible content markup

Collapsible content markup

To create a collapsible blocks of content, create a container and add the data-role="collapsible" attribute.

Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.

After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.

  
 <div data-role="collapsible">
 <h3>I'm a header</h3>
 <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
 </div>
 

I'm a headerclick to collapse contents

I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the data-collapsed="true" attribute to the wrapper.

<div data-role="collapsible" data-collapsed="true">

This code will create a collapsible widget like this:

I'm a headerclick to expand contents

Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.

Collapsible example

This page has 4 collapsible containers with different types of content inside.

Section 1: Collapsed text blockclick to expand contents

Section 2: Expanded on loadclick to collapse contents

I'm open when the page loads because I don't have the data-collapsed="true" attribute on my container.
I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.

Section 3: Form elementsclick to expand contents

Section 4: Collapsed listclick to expand contents

Nested Collapsibles

I'm a headerclick to collapse contents

I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

I'm a nested collapsible headerclick to collapse contents

I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

Collapsible sets

By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:

I'm a header in a set of collapsiblesclick to expand contents

I'm a header in a set of collapsiblesclick to expand contents

I'm a header in a set of collapsiblesclick to collapse contents

I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.