<dl class="accordion">
<dt class="accordion__title js-accordion-title">Akkordeon Headline I</dt>
<dd class="accordion__content js-accordion-content">
<div class="formatted-text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.</p>
</div>
</dd>
<dt class="accordion__title js-accordion-title">Akkordeon Headline II</dt>
<dd class="accordion__content js-accordion-content">
<div class="formatted-text formatted-text--image-left">
<figure class="figure" aria-labelledby="figure-a6d9">
<div class="figure__media">
<div class="image-wrap"><img class="image" alt="Das ist ein Platzhalter-Bild" src="/images/dummy/figure-480x320.jpg" />
<button class="copyright js-tooltip image__copyright" title="Quellenangabe" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-cfe3" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
</div>
<figcaption class="figure__caption" id="figure-a6d9">
Ich bin eine Bildunterschrift <small class="figure__copyright">(Quellenangabe)</small>
</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.</p>
</div>
</dd>
<dt class="accordion__title js-accordion-title">Akkordeon Headline III</dt>
<dd class="accordion__content js-accordion-content">
<div class="formatted-text formatted-text--image-right">
<figure class="figure" aria-labelledby="figure-33a8">
<div class="figure__media">
<div class="image-wrap"><img class="image" alt="Das ist ein Platzhalter-Bild" src="/images/dummy/figure-480x320.jpg" />
<button class="copyright js-tooltip image__copyright" title="Quellenangabe" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-0002" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
</div>
<figcaption class="figure__caption" id="figure-33a8">
Ich bin eine Bildunterschrift <small class="figure__copyright">(Quellenangabe)</small>
</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.</p>
</div>
</dd>
</dl>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
//- Render accordion
dl.accordion&attributes(attr)
//- Panels
if panels
each panel in panels
dt.accordion__title.js-accordion-title #{panel.title}
dd.accordion__content.js-accordion-content
!= include('@formatted-text', panel.formatText)
{
"panels": [
{
"title": "Akkordeon Headline I",
"formatText": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.\n"
}
},
{
"title": "Akkordeon Headline II",
"formatText": {
"modifier": "image-left",
"figure": true,
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.\n"
}
},
{
"title": "Akkordeon Headline III",
"formatText": {
"modifier": "image-right",
"figure": true,
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.\n"
}
}
]
}
import randomId from '../../../javascripts/utils/random-id';
// Add accessibility attributes
document.querySelectorAll('.accordion__title').forEach(($title) => {
const id = randomId();
const $content = $title.nextElementSibling;
// Set IDs
$title.setAttribute('id', `accordion-title-${id}`);
$content.setAttribute('id', `accordion-content-${id}`);
// Set roles
$title.setAttribute('role', 'tab');
$content.setAttribute('role', 'tabpanel');
// Setup relationship
$title.setAttribute('aria-controls', `accordion-content-${id}`);
$content.setAttribute('aria-labelledby', `accordion-title-${id}`);
// Other attributes
$title.setAttribute('aria-expanded', 'false');
$title.setAttribute('aria-selected', 'false');
$title.setAttribute('tabindex', '-1');
$content.setAttribute('aria-hidden', 'true');
});
// Init accordion
document.querySelectorAll('.accordion').forEach(($accordion) => {
// Add accessibility attributes
$accordion.setAttribute('role', 'tablist');
$accordion.setAttribute('aria-multiselectable', 'true');
// Add events
$accordion.querySelectorAll('.accordion__title').forEach(($title, index, $titles) => {
// Make first tab clickable
if (index === 0) $title.setAttribute('tabindex', '0');
// Save focus
const saveFocus = () => {
// Reset other tab attributes
$titles.forEach(($t) => {
$t.setAttribute('tabindex', '-1');
$t.setAttribute('aria-selected', 'true');
});
// Set this tab attributes
$title.setAttribute('tabindex', '0');
$title.setAttribute('aria-selected', 'true');
};
// Click event
$title.addEventListener('click', () => {
// States
const $content = $title.nextElementSibling;
const active = $content.matches('.accordion__content--active');
// Save focus
saveFocus();
// Set this tab attributes
$title.setAttribute('aria-expanded', active ? 'false' : 'true');
$content.setAttribute('aria-hidden', active ? 'true' : 'false');
$content.classList.toggle('accordion__content--active');
});
// Keydown event
$title.addEventListener('keydown', (event) => {
const $first =
$accordion.querySelector('.accordion__title:first-of-type');
const $last =
$accordion.querySelector('.accordion__title:last-of-type');
const $next =
$last !== $title ? $title.nextElementSibling.nextElementSibling : false;
const $prev =
$first !== $title ? $title.previousElementSibling.previousElementSibling : false;
// Prevent default event
if ([13, 32, 35, 36, 37, 38, 39, 40].indexOf(event.which) >= 0) {
event.preventDefault();
event.stopPropagation();
}
// eslint-disable-next-line default-case
switch (event.which) {
// Left/Up
case 37:
case 38:
// Check for previous question
if (!$prev) { $last.focus(); } else { $prev.focus(); }
break;
// Right/Down
case 39:
case 40:
// Check for next question
if (!$next) { $first.focus(); } else { $next.focus(); }
break;
// Home
case 36:
// Set focus on first question
$first.focus();
break;
// End
case 35:
// Set focus on last question
$last.focus();
break;
// Enter/Space
case 13:
case 32:
// Show content
$title.click();
break;
}
});
// Focus event
$title.addEventListener('focus', saveFocus);
});
});
.accordion {
border-bottom: 1px solid $color-steelgrey-light;
font-size: 1.5rem;
.detail-page__content & {
margin-bottom: 5rem;
}
}
.accordion__title {
border-top: 1px solid $color-steelgrey-light;
color: $color-blue;
cursor: pointer;
font-weight: bold;
outline: none;
padding-bottom: 1rem;
padding-left: 3rem;
padding-top: 1rem;
position: relative;
&:hover {
text-decoration: underline;
}
&::before {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"><path fill="#DC0A1E" d="M8 6.6L1.7.3C1.33-.1.7-.1.3.3-.1.67-.1 1.3.3 1.7l7 7c.38.4 1.02.4 1.4 0l7-7c.4-.38.4-1.02 0-1.4-.38-.4-1.02-.4-1.4 0L8 6.6z"/></svg>');
content: '';
display: inline-block;
height: 0.9rem;
left: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
transition: $default-transition-duration transform;
width: 1.6rem;
}
&[aria-expanded='true']::before {
transform: translate(0, -50%) rotate(180deg);
}
@include mq($from: m) {
font-size: 1.7rem;
}
@include mq($from: l) {
font-size: 1.9rem;
}
.no-js & {
cursor: default;
}
}
.accordion__content {
display: none;
margin-left: 0;
padding-bottom: 1rem;
padding-left: 3rem;
> :last-child {
margin-bottom: 0;
}
.no-js & {
display: block;
}
@include mq($from: m) {
font-size: 1.7rem;
}
@include mq($from: l) {
font-size: 1.9rem;
}
}
.accordion__content--active {
animation: accordionIn 0.45s normal ease-in-out both 1;
display: block;
}
@keyframes accordionIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
There are no notes for this item.