Collapsible sets (Accordions)

Home

Collapsible set markup

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.

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 A</h3>
	<p>I'm the collapsible set content for section B.</p>
	</div>

	<div data-role="collapsible">
	<h3>Section B</h3>
	<p>I'm the collapsible set content for section B.</p>
	</div>

</div>
	

Here is an example of a collapsible set with 5 sections.

Section A

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.

Section B

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.

Section C

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.

Section D

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.

Section E

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.