# Accordion
TIP
A collapsible accordion to toggle the visibility of content across your project.
Use this JS-Selector: .js-accordion-group
.c-accordion-wrapper[role=tablist, aria-multiselectable]
> .c-accordion
> .c-accordion__title[.-is-active, role=tab, aria-controls, aria-expanded, aria-selected]
> .c-accordion__panel[.-is-active, role=tabpanel, aria-labelledby, aria-hidden]
1
2
3
4
2
3
4
# Non-multiselectable example
[aria-multiselectable="false"]
I'm initially open. Cool.
hide code
<div class="js-accordion-group c-accordion-wrapper"
id="accordion1"
role="tablist"
aria-multiselectable="false">
<div class="c-accordion">
<h3>
<button class="c-accordion__title"
id="accordion1_tab1"
role="tab"
aria-controls="accordion1_panel1"
aria-expanded="true"
aria-selected="true"
type="button">
Accordion No. 1
</button>
</h3>
<div class="c-accordion__panel"
id="accordion1_panel1"
aria-labelledby="accordion1_tab1"
role="tabpanel"
aria-hidden="false">
<p>
I'm initially open. Cool.
</p>
</div>
</div>
<div class="c-accordion">
<h3>
<button class="c-accordion__title"
id="accordion1_tab2"
role="tab"
aria-controls="accordion1_panel2"
aria-expanded="false"
aria-selected="false"
type="button">
Accordion No. 2
</button>
</h3>
<div class="c-accordion__panel"
id="accordion1_panel2"
aria-labelledby="accordion1_tab2"
role="tabpanel"
aria-hidden="true">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio doloribus eius eos, ipsa magni nam numquam placeat provident, quasi repudiandae sit veniam? A cumque eligendi ipsum laudantium nihil perspiciatis saepe!
</p>
</div>
</div>
<div class="c-accordion">
<h3>
<button class="c-accordion__title"
id="accordion1_tab3"
role="tab"
aria-controls="accordion1_panel3"
aria-expanded="false"
aria-selected="true"
type="button">
Accordion No. 3
</button>
</h3>
<div class="c-accordion__panel"
id="accordion1_panel3"
aria-labelledby="accordion1_tab3"
role="tabpanel"
aria-hidden="true">
<p>
Content of Tab 3
</p>
</div>
</div>
</div>
# Multiselectable example
.js-accordion-group[aria-multiselectable="true"] for multi selection
hide code
<div class="js-accordion-group c-accordion-wrapper"
id="accordion2"
role="tablist"
aria-multiselectable="true">
<div class="c-accordion">
<h3>
<button class="c-accordion__title"
id="accordion2_tab1"
role="tab"
aria-controls="accordion2_panel1"
aria-expanded="false"
aria-selected="false"
type="button">
Accordion No. 1
</button>
</h3>
<div class="c-accordion__panel"
id="accordion2_panel1"
aria-labelledby="accordion2_tab1"
role="tabpanel"
aria-hidden="true">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur esse et, facilis laborum nobis odio provident quod temporibus voluptas voluptatibus? Ipsa nobis officia repudiandae unde. Ad dolorem iusto necessitatibus nostrum!
</p>
</div>
</div>
<div class="c-accordion">
<h3>
<button class="c-accordion__title"
id="accordion2_tab2"
role="tab"
aria-controls="accordion2_panel2"
aria-expanded="false"
aria-selected="false"
type="button">
Accordion No. 2
</button>
</h3>
<div class="c-accordion__panel"
id="accordion2_panel2"
aria-labelledby="accordion2_tab2"
role="tabpanel"
aria-hidden="true">
<p>
Content of Tab 2
</p>
</div>
</div>
<div class="c-accordion">
<h3>
<button class="c-accordion__title"
id="accordion3_tab3"
role="tab"
aria-controls="accordion3_panel3"
aria-expanded="false"
aria-selected="true"
type="button">
Accordion No. 3
</button>
</h3>
<div class="c-accordion__panel"
id="accordion3_panel3"
aria-labelledby="accordion3_tab3"
role="tabpanel"
aria-hidden="true">
<p>
Content of Tab 3
</p>
</div>
</div>
</div>
# Modifiers
.c-accordion[.-has-arrows,.-light]
I'm initially open. Cool.
hide code
<div class="js-accordion-group c-accordion-wrapper"
id="accordion-light-version"
role="tablist"
aria-multiselectable="true">
<div class="c-accordion -light -has-arrows">
<h3>
<button class="c-accordion__title"
id="accordion1_tab1"
role="tab"
aria-controls="accordion_light_panel1"
aria-expanded="true"
aria-selected="true"
type="button">
Accordion No. 1
</button>
</h3>
<div class="c-accordion__panel"
id="accordion_light_panel1"
aria-labelledby="accordion_light_tab1"
role="tabpanel"
aria-hidden="false">
<p>
I'm initially open. Cool.
</p>
</div>
</div>
<div class="c-accordion -light -has-arrows">
<h3>
<button class="c-accordion__title"
id="accordion_light_tab2"
role="tab"
aria-controls="accordion_light_panel2"
aria-expanded="false"
aria-selected="false"
type="button">
Accordion No. 2
</button>
</h3>
<div class="c-accordion__panel"
id="accordion_light_panel2"
aria-labelledby="accordion_light_tab2"
role="tabpanel"
aria-hidden="true">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio doloribus eius eos, ipsa magni nam numquam placeat provident, quasi repudiandae sit veniam? A cumque eligendi ipsum laudantium nihil perspiciatis saepe!
</p>
</div>
</div>
</div>
# Settings and API
Default Settings:
const defaults = {
selector: {
accordionWrapper: ".js-accordion-group",
accordionHeader: "[role='tab']",
accordionPanel: "[role='tabpanel']",
accordionOpen: "[aria-expanded='true']",
accordionDisabled: "[aria-disabled='true']"
},
attribute: {
multiSelectable: "aria-multiselectable",
expanded: "aria-expanded",
selected: "aria-selected",
hidden: "aria-hidden"
},
class: {
isActive: "-is-active"
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
TIP
Initialize Accordion:
Accordion.init(settings: object);
← Video Autocomplete →