<div class="accordion accordion--plp">
<div class="accordion__inner">
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Magna anim anim officia mollit aliqua nostrud.</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
Est incididunt cupidatat voluptate enim laboris in ex pariatur. Minim cupidatat duis est sit ipsum. Adipisicing consectetur amet Lorem ut occaecat qui cillum. Incididunt eiusmod voluptate reprehenderit ullamco duis amet. Et enim pariatur reprehenderit id do consectetur do ad magna Lorem duis. In amet tempor commodo ut irure anim sunt elit duis irure quis anim ex.
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Tempor in nostrud reprehenderit sit aute sint.</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
Aliqua non id dolor esse cillum ipsum. Occaecat veniam laboris do laboris exercitation anim pariatur et. Officia officia pariatur anim deserunt nostrud. Aute exercitation nostrud sint id duis tempor cupidatat qui duis. Pariatur proident velit fugiat do. Mollit consectetur voluptate labore ipsum labore cillum sint officia dolor est. Pariatur in aliquip Lorem voluptate duis consectetur mollit. Proident laborum ad amet labore voluptate ullamco amet ex excepteur consectetur exercitation ullamco. Nisi excepteur amet excepteur deserunt commodo incididunt laboris laborum voluptate Lorem culpa pariatur anim nostrud. Ad culpa in amet laboris dolor excepteur sit sit ea ex fugiat aliquip nisi. Nostrud anim nulla ut cillum eu et do ea magna. Reprehenderit ad duis dolor ea aliquip voluptate minim quis officia reprehenderit enim fugiat.
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__header">
<h4>Labore id fugiat et sunt proident ea nostrud laborum nulla in excepteur.</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
Sint exercitation nisi labore ex nisi sit ea ex in. Dolore anim velit cupidatat occaecat ut duis dolor. Consectetur cillum magna irure consequat aliquip ad esse sunt ut id. Ad ut officia enim qui pariatur nisi commodo dolor dolore ut. Aliquip aute tempor amet velit eiusmod cillum. Ea aute mollit enim velit aute esse in laboris incididunt aute ut esse.
</div>
</div>
</div>
</div>
<div class="accordion{% if modifier %} accordion--{{modifier}}{% endif %}">
<div class="accordion__inner">
{% for accordion in accordions -%}
<div class="accordion__item">
<div class="accordion__item__header">
<h4>{{accordion.header.text}}</h4>
<i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
</div>
<div class="accordion__item__content" style="display:none;">
{{accordion.content.text|safe}}
</div>
</div>
{%- endfor %}
</div>
</div>
{
"modifier": "plp",
"accordions": [
{
"header": {
"text": "Magna anim anim officia mollit aliqua nostrud."
},
"content": {
"text": "Est incididunt cupidatat voluptate enim laboris in ex pariatur. Minim cupidatat duis est sit ipsum. Adipisicing consectetur amet Lorem ut occaecat qui cillum. Incididunt eiusmod voluptate reprehenderit ullamco duis amet. Et enim pariatur reprehenderit id do consectetur do ad magna Lorem duis. In amet tempor commodo ut irure anim sunt elit duis irure quis anim ex."
}
},
{
"header": {
"text": "Tempor in nostrud reprehenderit sit aute sint."
},
"content": {
"text": "Aliqua non id dolor esse cillum ipsum. Occaecat veniam laboris do laboris exercitation anim pariatur et. Officia officia pariatur anim deserunt nostrud. Aute exercitation nostrud sint id duis tempor cupidatat qui duis. Pariatur proident velit fugiat do. Mollit consectetur voluptate labore ipsum labore cillum sint officia dolor est. Pariatur in aliquip Lorem voluptate duis consectetur mollit. Proident laborum ad amet labore voluptate ullamco amet ex excepteur consectetur exercitation ullamco. Nisi excepteur amet excepteur deserunt commodo incididunt laboris laborum voluptate Lorem culpa pariatur anim nostrud. Ad culpa in amet laboris dolor excepteur sit sit ea ex fugiat aliquip nisi. Nostrud anim nulla ut cillum eu et do ea magna. Reprehenderit ad duis dolor ea aliquip voluptate minim quis officia reprehenderit enim fugiat."
}
},
{
"header": {
"text": "Labore id fugiat et sunt proident ea nostrud laborum nulla in excepteur."
},
"content": {
"text": "Sint exercitation nisi labore ex nisi sit ea ex in. Dolore anim velit cupidatat occaecat ut duis dolor. Consectetur cillum magna irure consequat aliquip ad esse sunt ut id. Ad ut officia enim qui pariatur nisi commodo dolor dolore ut. Aliquip aute tempor amet velit eiusmod cillum. Ea aute mollit enim velit aute esse in laboris incididunt aute ut esse."
}
}
]
}
$(function () {
const hash = $(location).prop('hash')
const $accordions = [...$('.accordion')]
if ($accordions.length) {
$accordions.forEach($accordion => {
const $items = $('.accordion__item', $accordion)
const $headers = $('.accordion__item__header', $accordion)
const $contents = $('.accordion__item__content', $accordion)
$headers.on('click touch', function (e) {
e.preventDefault();
const $content = $($(this).siblings('.accordion__item__content')[0])
$items.removeClass('accordion__item--open')
$contents.not($content).slideUp(function () {
$(this).attr('aria-expanded', false)
$(this).parent().removeClass('accordion__item--opened')
})
if ($content.parent().hasClass('accordion__item--opened')) {
$content.slideUp(() => {
$(this).attr('aria-expanded', false)
$content.parent().removeClass('accordion__item--opened')
})
} else {
$content.slideDown(() => {
$(this).attr('aria-expanded', true)
$content.parent().addClass('accordion__item--opened')
})
}
})
})
}
})
.accordion {
$this: &;
&__item {
margin-top: rem(6.4px);
&:first-child {
margin-top: 0;
}
&__header {
background: $color-primary-blue;
border-radius: rem(4px);
color: $color-white;
cursor: pointer;
padding: rem(8px) rem(20px);
position: relative;
h4 {
font-size: rem(16px);
font-weight: 400;
margin: 0;
}
.icon {
position: absolute;
top: 50%;
right: rem(20px);
transform: translateY(-50%) rotate(0deg);
}
}
&__content {
border: rem(1px) solid #DDD;
border-radius: rem(4px);
padding: rem(20px);
}
&--opened {
#{$this}__item__header {
.icon {
transform: translateY(-50%) rotate(-180deg)
}
}
}
}
&--plp {
#{$this}__item {
&__header {
background: $color-white;
border: rem(2px) solid $color-selago;
color: $color-primary-text;
}
&__content {
border: none;
padding: 0;
}
}
}
}
No notes defined.