Collapsible sets start with the exact same markup as individual collapsibles. By adding a parent wrapper with a data-role="collapsible-set"
attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the data- attribute reference to see all the possible attributes you can add to collapsible sets.
By default, all the sections will be collapsed. To set a section to be open when the page loads, add the data-collapsed="false"
attribute to the heading of the section you want expanded.
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
Here is an example of a collapsible set with 5 sections.
I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the data-collapsed="false"
attribute.
I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.
I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.
I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.
I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.
For full width collapsibles without corner styling add the data-inset="false"
attribute to the set.
I'm the collapsible content.
I'm the collapsible content.
I'm the collapsible content.
For a more compact version that is useful in tight spaces, add the data-mini="true"
attribute to the set to create a mini version.
Collapsible content
Collapsible content
Collapsible content
Collapsible headings’ default icons can be overridden by using the data-collapsed-icon
and data-expanded-icon
attributes, either at the collapsible-set
level or on an individual collapsible basis.
Collapsible content
Collapsible content
Collapsible content
Collapsible headings’ default icon positioning can be overridden by using the data-iconpos
attribute, either at the collapsible-set
level or on an individual collapsible basis.
Inherits icon positioning from data-iconpos="right"
attribute on parent.
data-iconpos="left"
data-iconpos="bottom"
data-iconpos="top"
The standard data-theme
attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the data-content-theme
attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
Collapsible content
Collapsible content
Collapsible content
To have individual sections in a group styled differently, add data-theme
and data-content-theme
attributes to specific collapsibles.
Collapsible content, swatch "b"
Collapsible content, swatch "a"
Collapsible content, swatch "d"
Add the data-corners="false"
attribute to have an inset collapsible set without rounded corners.
<div data-role="collapsible-set" data-corners="false" data-theme="b" data-content-theme="d">
Collapsible content
Collapsible content
Collapsible content