Accordion

TIP

A collapsible accordion to toggle the visibility of content across your project.

Use this JS-Selector on .c-accordion-wrapper: .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]

Non-multiselectable example

[aria-multiselectable="false"]

I'm initially open. Cool.

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!

Content of Tab 3

Show 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

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!

Content of Tab 2

Content of Tab 3

Show 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

Large Version

.c-accordion[.-large]

I'm initially closed. Cool.

Light Version With Arrows

.c-accordion[.-light.-has-arrows]

I'm initially closed. Cool.

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

TIP

Initialize Accordion:
Accordion.init(settings: object);