Collapsible content

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>
	

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:

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.

Nested Collapsibles

Collapsible sets

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