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