To create a collapsible block of content, create a container and add the data-role="collapsible"
attribute. Using data-content-theme
attribute allows you to set a theme for the content of the collapsible. View the data- attribute reference to see all the possible attributes you can add to collapsibles.
Directly inside this container, add any header (H1-H6) or legend element. 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.
By default, the content will be collapsed.
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
I'm the collapsible content. By default I'm closed, but you can click the header to open me.
To expand the content when the page loads, add the data-collapsed="false"
attribute to the wrapper.
<div data-role="collapsible" data-collapsed="false">
This code will create a collapsible widget like this:
I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.
By default collapsibles have an inset appearance. To make them full width without corner styling add the data-inset="false"
attribute to the element.
<div data-role="collapsible" data-inset="false">
This code will create a non-inset collapsible:
I'm the collapsible content.
For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true"
attribute to the element to create a mini version.
<div data-role="collapsible" data-mini="true">
This code will create a mini collapsible widget:
I'm the collapsible content.
The default icons of collapsible headings can be overridden by using the data-collapsed-icon
and data-expanded-icon
attributes. In the example below, data-collapsed-icon="arrow-r"
and data-expanded-icon="arrow-d"
.
data-collapsed-icon="arrow-r"
and data-expanded-icon="arrow-d"
The default icon positioning of collapsible headings can be overridden by using the data-iconpos
attribute. In the below case, data-iconpos="right"
.
data-iconpos="right"
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 within which it sits.
To provide a stronger visual connection between the collapsible header and content, add the data-content-theme
attribute to the wrapper and specify a theme swatch letter. This applies the swatch's border and flat background color (not the gradient) to the content block, removes the rounded corners from the bottom of the header, and gives the bottom of the content block rounded corners to visually group these elements.
<div data-role="collapsible" data-content-theme="c">
<h3>Header</h3>
<p>I'm the collapsible content with a themed content block set to "c".</p>
</div>
I'm the collapsible content with a themed content block set to "c".
To set the theme on a collapsible header button, add the data-theme
attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Header swatch A</h3>
<p>I'm the collapsible content with a themed content block set to "a".</p>
</div>
I'm the collapsible content with a themed content block set to "a".
I'm the collapsible content with a themed content block set to "d".
To create an inset collapsible without rounded corners you can add the data-corners="false"
attribute to the element.
<div data-role="collapsible" data-corners="false" data-theme="b" data-content-theme="d">
This code will create an inset collapsible without rounded corners:
I'm the collapsible content.
Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide a clearer visual connection between the levels.
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 child collapsible.
Three levels deep now.
It's possible to combine multiple collapsibles into a grouped set that acts like an accordion widget.