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 class="a-accordion__headline-heading highlight">Accordion Headline</h2>
    <button
      id="accordion"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="content headline button accordion"
      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="content accordion"
    role="region"
    aria-labelledby="content accordion"
  >
    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 class="a-accordion__headline-heading highlight">Accordion Headline</h2>
    <button
      id="accordion open"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="content headline button accordion open"
      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="content accordion open"
    role="region"
    aria-labelledby="content accordion open"
  >
    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 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="content headline button accordion small"
      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="content accordion small"
    role="region"
    aria-labelledby="content accordion small"
  >
    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 class="a-accordion__headline-heading highlight">Accordion Headline</h2>
    <button
      id="accordion small open"
      type="button"
      class="a-accordion__headline-button"
      aria-expanded="false"
      aria-controls="content headline button accordion small open"
      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="content accordion small open"
    role="region"
    aria-labelledby="content accordion small open"
  >
    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 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="content headline button Multi-Accordion Demo 1"
      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="content Multi-Accordion Demo 1"
    role="region"
    aria-labelledby="content Multi-Accordion Demo 1"
  >
    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 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="content headline button Multi-Accordion Demo 2"
      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="content Multi-Accordion Demo 2"
    role="region"
    aria-labelledby="content Multi-Accordion Demo 2"
  >
    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 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="content headline button Multi-Accordion Demo 3"
      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="content Multi-Accordion Demo 3"
    role="region"
    aria-labelledby="content Multi-Accordion Demo 3"
  >
    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 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="content headline button Multi-Accordion Demo 4"
      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="content Multi-Accordion Demo 4"
    role="region"
    aria-labelledby="content Multi-Accordion Demo 4"
  >
    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 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="content headline button Multi-Accordion small Demo 1"
      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="content Multi-Accordion small Demo 1"
    role="region"
    aria-labelledby="content Multi-Accordion small Demo 1"
  >
    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 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="content headline button Multi-Accordion small Demo 2"
      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="content Multi-Accordion small Demo 2"
    role="region"
    aria-labelledby="content Multi-Accordion small Demo 2"
  >
    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 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="content headline button Multi-Accordion small Demo 3"
      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="content Multi-Accordion small Demo 3"
    role="region"
    aria-labelledby="content Multi-Accordion small Demo 3"
  >
    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 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="content headline button Multi-Accordion small Demo 4"
      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="content Multi-Accordion small Demo 4"
    role="region"
    aria-labelledby="content Multi-Accordion small Demo 4"
  >
    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

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

.a-accordion {
  border-top: 0.0625rem solid var(--small__enabled__fill__default);

  &__headline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    cursor: pointer;
    background: var(--integrated__enabled__fill__default);
    color: var(--integrated__enabled__front__default);

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

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

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

    &:hover,
    &:hover &-button {
      color: var(--integrated__enabled__front__hovered);
    }

    &:active,
    &:active &-button {
      color: var(--integrated__enabled__front__pressed);
    }
  }

  &__headline-heading {
    @include size-xl;

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

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

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

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

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

  @include rb-core-up-to-tablet {
    .a-accordion__headline-text {
      @include size-m;
    }

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