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.

Show Code

<div
        class="js-accordion-group c-accordion-wrapper"
        id="accordion-light-version"
        role="tablist"
        aria-multiselectable="true"
>
    <div class="c-accordion -large">
        <h3>
            <button class="c-accordion__title"
                    id="accordion1_tab1"
                    role="tab"
                    aria-controls="accordion_light_panel1"
                    aria-expanded="false"
                    aria-selected="false"
                    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 closed. Cool.
            </p>
        </div>
    </div>
</div>

Light Version With Arrows

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

I'm initially closed. Cool.

Show Code

<div
        class="js-accordion-group c-accordion-wrapper"
        id="accordion-arrows-version"
        role="tablist"
        aria-multiselectable="false"
>
    <div class="c-accordion -light -has-arrows">
        <h3>
            <button class="c-accordion__title"
                    id="accordion2_light_tab1"
                    role="tab"
                    aria-controls="accordion2_light_panel1"
                    aria-expanded="false"
                    aria-selected="false"
                    type="button"
            >
                Accordion No. 1
            </button>
        </h3>
        <div
                class="c-accordion__panel"
                id="accordion2_light_panel1"
                aria-labelledby="accordion2_light_tab1"
                role="tabpanel"
                aria-hidden="false"
        >
            <p>
                I'm initially closed. Cool.
            </p>
        </div>
    </div>
</div>

With Left Border

.c-accordion[.-has-border]

Test

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Show Code

<div
        class="js-accordion-group c-accordion-wrapper"
        id="accordion-border-version"
        role="tablist"
        aria-multiselectable="false"
>
    <div class="c-accordion -has-border">
        <div class="c-accordion__border"></div>
        <h3>
            <button class="c-accordion__title"
                    id="accordion_border_tab1"
                    role="tab"
                    aria-controls="accordion_border_panel1"
                    aria-expanded="false"
                    aria-selected="false"
                    type="button"
            >
                Accordion No. 1
            </button>
            <span class="c-accordion__subtitle">Test</span>
        </h3>
        <div
                class="c-accordion__panel"
                id="accordion_border_panel1"
                aria-labelledby="accordion_border_tab1"
                role="tabpanel"
                aria-hidden="false"
        >
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
        </div>
    </div>
</div>

Custom Layout Example

With custom HTML for shortened Title, extra Subtitle, Action-Button and Highlight-Block Panel:

Bestandteil löschen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Show Code

<div
  class="js-accordion-group c-accordion-wrapper"
  id="accordion-custom-version"
  role="tablist"
  aria-multiselectable="false"
>
  <div class="c-accordion -has-arrows -light">
    <div class="h-flex h-flex-row h-space-between p-b-reset">
      <button class="c-accordion__title m-r-s h-width-80"
              id="accordion_custom_tab1"
              role="tab"
              aria-controls="accordion_custom_panel1"
              aria-expanded="false"
              aria-selected="false"
      >
                <span class="c-accordion__title__main h-overflow-ellipsis">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                    </span>
        <span class="h-small h-inline-block m-l-m h-color-disabled">
                    <span class="h-no-wrap">234 g</span>
                </span>
      </button>
      <div class="h-pos-relative h-flex h-flex-row h-vertical-center h-end">
        <div class="print-hide -open-left h-help-pointer h-inline-block c-tooltip__trigger">
          <button id="button-93" type="button" class="-small -inverted -redesign c-btn -icon-btn" aria-label="Bestandteil löschen">
            <span aria-hidden="true" class="fa fa-trash"></span>
            <span class="h-sr-only">Bestandteil löschen</span>
          </button>
          <div class="c-tooltip h-always-on-top m-r-xs m-t-m">Bestandteil löschen</div>
        </div>
      </div>
    </div>
    <div class="c-accordion__panel m-t-xs"
         id="accordion_custom_panel1"
         aria-labelledby="accordion_custom_tab1"
         role="tabpanel"
         aria-hidden="false"
    >
      <div class="h-highlight-block p-x-l p-y-l">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </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"
        }
    };

TIP

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

Close all accordions in an AccordionGroup:
Accordion.closeAll(accordionGroup: Node);

Open individual accordion:
Accordion.open(accordion: Node);

Close individual accordion:
Accordion.close(accordion: Node);