<section class="accordion js-accordion" data-mt-tolerance="10">
<section class="accordion__item accordion--open">
<h1 class="accordion__title">Lorem ipsum dolor</h1>
<div class="accordion__content">
<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</section>
<section class="accordion__item">
<h1 class="accordion__title">Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</h1>
<div class="accordion__content">
<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</section>
<section class="accordion__item">
<h1 class="accordion__title">Lorem ipsum dolor</h1>
<div class="accordion__content">
<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</section>
<section class="accordion__item">
<h1 class="accordion__title">Lorem ipsum dolor</h1>
<div class="accordion__content">
<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</section>
</section>
<section class="accordion js-accordion" data-mt-tolerance="10">
{{#each items}}
<section class="accordion__item{{#if open}} accordion--open{{/if}}">
<h1 class="accordion__title">{{title}}</h1>
<div class="accordion__content">
{{{content}}}
</div>
</section>
{{/each}}
</section>
{
"items": [
{
"title": "Lorem ipsum dolor",
"content": "<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
"open": true
},
{
"title": "Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor",
"content": "<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
},
{
"title": "Lorem ipsum dolor",
"content": "<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
},
{
"title": "Lorem ipsum dolor",
"content": "<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
}
]
}
.accordion {
display: block;
margin: 0;
padding: 0;
}
.accordion__item {
display: block;
border-top: rem(2) solid $color__brand--dark;
}
.accordion__title {
display: block;
min-height: rem(66);
margin: 0;
padding: rem(15) rem(50) rem(15) 0;
position: relative;
font-size: rem(16);
line-height: 1.125;
font-weight: $heading__font-weight;
cursor: pointer;
color: $body__font-color;
&::before,
&::after {
content: '';
display: block;
position: absolute;
}
&::before {
width: rem(40);
height: rem(40);
position: absolute;
top: rem(13);
right: 0;
border: rem(1) solid $color__accent;
border-radius: $border-radius--round;
}
&::after {
@include triangle(rem(10), currentColor, down);
top: rem(31);
right: rem(15);
}
&:hover {
color: $color__accent;
}
}
.accordion__content {
display: none;
}
// STATES
.accordion--open {
.accordion__title {
color: $color__brand--one;
&::after {
@include triangle(rem(10), currentColor, up);
top: rem(30);
border-top: 0;
}
}
.accordion__content {
display: block;
}
}
// NO-JS Fallback
.no-js {
.accordion__content {
display: block;
}
}
// LARGE
// ----------------------------------------
@include mq(large) {
.accordion__title {
min-height: rem(70);
padding-top: rem(24);
font-size: rem(20);
line-height: 1.2;
&::before {
top: rem(15);
}
&::after {
top: rem(33);
}
}
// STATES
.accordion--open {
.accordion__title {
&::after {
top: rem(32);
}
}
}
}
import MoveTo from 'moveto';
import Base from '../../_config/base';
class Accordion extends Base {
constructor(el) {
super(el);
this.config = {
openClass: 'accordion--open',
titleClass: 'accordion__title',
itemSelector: '.accordion__item',
};
this.items = this.$el.querySelectorAll(this.config.itemSelector);
this.offset = this.$el.getAttribute('data-mt-tolerance');
this.$el.addEventListener('click', this.toggleItem.bind(this));
}
toggleItem(e) {
if (e.target.classList.contains(this.config.titleClass)) {
const item = e.target.closest(this.config.itemSelector);
const currentOpen = item.classList.contains(this.config.openClass);
for (let i = 0; i < this.items.length; i += 1) {
this.items[i].classList.remove(this.config.openClass);
}
if (!currentOpen) {
item.classList.toggle(this.config.openClass);
}
e.preventDefault();
const moveTo = new MoveTo({
tolerance: this.offset ? this.offset : 0,
});
moveTo.move(item);
}
}
}
Accordion.className = 'Accordion';
export default Accordion;
There are no notes for this item.