accordion

An Accordion is a vertically stacked list of elements with show/hide functionality. Tapping or clicking on the arrow icon opens the Accordion.

Each variant has a button with an id in the headline. In order to have all the aria-attributes set correctly, this id needs to be unique and set by the user.
table of content

component variations

accordion

Open on blank page

Accordion Headline

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?
<div class="a-accordion">
  <div class="a-accordion__headline">
    <h2 id="accordion-headline" class="a-accordion__headline-heading highlight">
      Accordion Headline
    </h2>
    <button
      id="accordion"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="accordion-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="accordion-content"
    role="region"
    aria-labelledby="accordion-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>

accordion open

Open on blank page

Accordion Headline

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?
<div class="a-accordion a-accordion--open">
  <div class="a-accordion__headline">
    <h2
      id="accordion-open-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline
    </h2>
    <button
      id="accordion-open"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="true"
      aria-controls="accordion-open-content"
      aria-label="arrow up"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-up"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="accordion-open-content"
    role="region"
    aria-labelledby="accordion-open-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>

accordion small

Open on blank page

Accordion Headline

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?
<div class="a-accordion a-accordion--small">
  <div class="a-accordion__headline">
    <h2
      id="accordion-small-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline
    </h2>
    <button
      id="accordion-small"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="accordion-small-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="accordion-small-content"
    role="region"
    aria-labelledby="accordion-small-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>

accordion small open

Open on blank page

Accordion Headline

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?
<div class="a-accordion a-accordion--open a-accordion--small">
  <div class="a-accordion__headline">
    <h2
      id="accordion-small-open-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline
    </h2>
    <button
      id="accordion-small-open"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="true"
      aria-controls="accordion-small-open-content"
      aria-label="arrow up"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-up"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="accordion-small-open-content"
    role="region"
    aria-labelledby="accordion-small-open-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>

Multi-Accordion Demo

Open on blank page

Accordion Headline 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Accordion Headline 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Accordion Headline 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Accordion Headline 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?
<div class="a-accordion">
  <div class="a-accordion__headline">
    <h2
      id="multi-accordion-demo-1-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline 1
    </h2>
    <button
      id="multi-accordion-demo-1"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="multi-accordion-demo-1-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="multi-accordion-demo-1-content"
    role="region"
    aria-labelledby="multi-accordion-demo-1-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>
<div class="a-accordion">
  <div class="a-accordion__headline">
    <h2
      id="multi-accordion-demo-2-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline 2
    </h2>
    <button
      id="multi-accordion-demo-2"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="multi-accordion-demo-2-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="multi-accordion-demo-2-content"
    role="region"
    aria-labelledby="multi-accordion-demo-2-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>
<div class="a-accordion">
  <div class="a-accordion__headline">
    <h2
      id="multi-accordion-demo-3-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline 3
    </h2>
    <button
      id="multi-accordion-demo-3"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="multi-accordion-demo-3-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="multi-accordion-demo-3-content"
    role="region"
    aria-labelledby="multi-accordion-demo-3-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>
<div class="a-accordion">
  <div class="a-accordion__headline">
    <h2
      id="multi-accordion-demo-4-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline 4
    </h2>
    <button
      id="multi-accordion-demo-4"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="multi-accordion-demo-4-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="multi-accordion-demo-4-content"
    role="region"
    aria-labelledby="multi-accordion-demo-4-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>

Multi-Accordion small Demo

Open on blank page

Accordion Headline 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Accordion Headline 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Accordion Headline 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Accordion Headline 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?
<div class="a-accordion a-accordion--small">
  <div class="a-accordion__headline">
    <h2
      id="multi-accordion-small-demo-1-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline 1
    </h2>
    <button
      id="multi-accordion-small-demo-1"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="multi-accordion-small-demo-1-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="multi-accordion-small-demo-1-content"
    role="region"
    aria-labelledby="multi-accordion-small-demo-1-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>
<div class="a-accordion a-accordion--small">
  <div class="a-accordion__headline">
    <h2
      id="multi-accordion-small-demo-2-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline 2
    </h2>
    <button
      id="multi-accordion-small-demo-2"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="multi-accordion-small-demo-2-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="multi-accordion-small-demo-2-content"
    role="region"
    aria-labelledby="multi-accordion-small-demo-2-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>
<div class="a-accordion a-accordion--small">
  <div class="a-accordion__headline">
    <h2
      id="multi-accordion-small-demo-3-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline 3
    </h2>
    <button
      id="multi-accordion-small-demo-3"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="multi-accordion-small-demo-3-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="multi-accordion-small-demo-3-content"
    role="region"
    aria-labelledby="multi-accordion-small-demo-3-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>
<div class="a-accordion a-accordion--small">
  <div class="a-accordion__headline">
    <h2
      id="multi-accordion-small-demo-4-headline"
      class="a-accordion__headline-heading highlight"
    >
      Accordion Headline 4
    </h2>
    <button
      id="multi-accordion-small-demo-4"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="multi-accordion-small-demo-4-content"
      aria-label="arrow down"
    >
      <i class="a-icon a-accordion__headline-icon boschicon-bosch-ic-down"></i>
    </button>
  </div>
  <div
    class="a-accordion__content"
    id="multi-accordion-small-demo-4-content"
    role="region"
    aria-labelledby="multi-accordion-small-demo-4-headline"
  >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam
    blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit
    tempore?
  </div>
</div>

additional content

styles SCSS

@use "../../styles/helpers.scss";

/* stylelint-disable a11y/no-display-none */
/* stylelint-disable a11y/line-height-is-vertical-rhythmed */

.a-accordion {
  border-top: 0.0625rem solid var(--nested-major__enabled__default__fill, var(--base-major__enabled__default__fill));

  &__headline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    cursor: pointer;
    background: var(--nested-pure__enabled__default__fill, var(--integrated-pure__enabled__default__fill));
    color: var(--nested-pure__enabled__default__front, var(--integrated-pure__enabled__default__front));

    &-button {
      background: inherit;
      border: 0;
      color: inherit;
      line-height: 1;
      padding: 0;

      .a-icon {
        font-size: 2.25rem;
        cursor: pointer;
      }

      &:focus-visible {
        @include helpers.focus-inside;
      }
    }

    &:hover,
    &:hover &-button {
      color: var(--nested-pure__enabled__hovered__front, var(--integrated-pure__enabled__hovered__front));
    }

    &:active,
    &:active &-button {
      color: var(--nested-pure__enabled__pressed__front, var(--integrated-pure__enabled__pressed__front));
    }
  }

  &__headline-heading {
    @include helpers.size-xl;

    margin: unset;
    margin-right: 0.75rem;
  }

  &__content {
    display: none;
    padding: 0 0 3rem;
  }

  &.a-accordion--open {
    > .a-accordion__content {
      display: block;
    }
  }

  &.a-accordion--small {
    .a-accordion__headline-heading {
      @include helpers.size-m;
    }

    .a-accordion__content {
      padding: 0 0 3rem;
    }
  }

  @include helpers.desktop-and-up {
    .a-accordion__content {
      padding: 0 3rem 3rem 0;
    }
  }
}