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 heading, add any HTML markup you want to be collapsible. The framework will wrap all this markup in a container that will be hidden or shown when the heading is clicked.

		
	<div data-role="collapsible">
	<h3>I'm a header</h3>
	<p>I'm the collapsible content.</p>
	</div>
	

By default, the content will be expanded. To collapse the content when the page loads, add the data-state="collapsed" attribute to the wrapper.

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

This code will create a collapsible widget like this:

The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.

Collapsible example

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