# 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. 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 B.</p>
    	</div>

    	<div data-role="collapsible">
    	<h3>Section 2</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 1

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.

### Section 2

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 3

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 4

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 5

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.

## Theming collapsible content

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">

### Section 1

Collapsible content

### Section 2

Collapsible content

### Section 3

Collapsible content

## Theming individual sections

To have individual sections in a group styled differently, add `data-theme` and `data-content-theme` attributes to specific collapsibles.

### Section header, swatch B

Collapsible content, swatch B

### Section header, swatch A

Collapsible content, swatch A

### Section header, swatch E

Collapsible content, swatch D

### More in this section

- Content Formatting
- Basic HTML styles
- Layout grids (columns)
- Collapsible content blocks
- Collapsible sets (accordions)
- Theming content