Collapsible content

Home

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 header

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 header

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.

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 block

I'm closed when the page loads because I 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. I'm the collapsible content.

Section 2: Expanded on load

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 elements

Section 4: Collapsed list

Nested Collapsibles

I'm a header

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 header

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

It's possible to combine multiple collapsibles into a grouped sets that acts like an accordion widget. Learn more