# Collapsible set

Home Search

## Collapsible set (accordion)

- Basics
- Options
- Methods
- Events

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.

### 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.

## Non-inset collapsible sets

For full width collapsibles without corner styling add the `data-inset="false"` attribute to the set.

### I'm a header

I'm the collapsible content.

### I'm a header

I'm the collapsible content.

### I'm a header

I'm the collapsible content.

## Mini collapsible sets

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.

### Section 1

Collapsible content

### Section 2

Collapsible content

### Section 3

Collapsible content

## Custom icons

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.

### Section 1

Collapsible content

### Section 2

Collapsible content

### Section 3

Collapsible content

## Icon positioning

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.

### Section 1

Inherits icon positioning from `data-iconpos="right"` attribute on parent.

### Section 2

data-iconpos="left"

### Section 3

data-iconpos="bottom"

### Section 4

data-iconpos="top"

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

## Corner styling

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

### Section 1

Collapsible content

### Section 2

Collapsible content

### Section 3

Collapsible content

### More in this section

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