<div class="FAQ " style="">
<div class="FAQ-item " style="">
<h4 class="icon _after _arrow js-click-faqheader " style="">
Impedit temporibus autem ea et est et dolores.
</h4>
<div class="FAQ-answer " style="">
<p id="" class="">
Repellendus nisi accusantium dolor. Quos voluptatem explicabo est minus omnis quo. Quidem sapiente sit molestiae. Occaecati et animi est illo. Itaque deleniti aliquid amet et deleniti maiores. Quasi vel autem aut sit ducimus. Culpa modi itaque quae est
et. Officiis eos exercitationem id eaque sed enim. Quod earum omnis id sunt rerum explicabo ut reprehenderit aperiam. Ut distinctio velit. Non praesentium debitis quia et omnis.
</p>
</div>
</div>
<div class="FAQ-item " style="">
<h4 class="icon _after _arrow js-click-faqheader " style="">
Impedit temporibus autem ea et est et dolores.
</h4>
<div class="FAQ-answer " style="">
<p id="" class="">
Repellendus nisi accusantium dolor. Quos voluptatem explicabo est minus omnis quo. Quidem sapiente sit molestiae. Occaecati et animi est illo. Itaque deleniti aliquid amet et deleniti maiores. Quasi vel autem aut sit ducimus. Culpa modi itaque quae est
et. Officiis eos exercitationem id eaque sed enim. Quod earum omnis id sunt rerum explicabo ut reprehenderit aperiam. Ut distinctio velit. Non praesentium debitis quia et omnis.
</p>
</div>
</div>
<div class="FAQ-item " style="">
<h4 class="icon _after _arrow js-click-faqheader " style="">
Impedit temporibus autem ea et est et dolores.
</h4>
<div class="FAQ-answer " style="">
<p id="" class="">
Repellendus nisi accusantium dolor. Quos voluptatem explicabo est minus omnis quo. Quidem sapiente sit molestiae. Occaecati et animi est illo. Itaque deleniti aliquid amet et deleniti maiores. Quasi vel autem aut sit ducimus. Culpa modi itaque quae est
et. Officiis eos exercitationem id eaque sed enim. Quod earum omnis id sunt rerum explicabo ut reprehenderit aperiam. Ut distinctio velit. Non praesentium debitis quia et omnis.
</p>
</div>
</div>
</div>
<script type="text/javascript">
function openAccordion() {
if (document.body.clientWidth <= 599) {
if (!this.parentNode.classList.contains('isOpen')) {
this.parentNode.classList.add('isOpen');
} else {
this.parentNode.classList.remove('isOpen');
}
}
}
[].forEach.call(document.querySelectorAll('.js-click-faqheader'), function(el) {
el.addEventListener('click', openAccordion);
});
</script>
<div class="FAQ {{modifier}}" style="{{style}}">
{{> @children}}
</div>
<script type="text/javascript">
function openAccordion() {
if (document.body.clientWidth <= 599) {
if (!this.parentNode.classList.contains('isOpen')) {
this.parentNode.classList.add('isOpen');
} else {
this.parentNode.classList.remove('isOpen');
}
}
}
[].forEach.call(document.querySelectorAll('.js-click-faqheader'), function(el) {
el.addEventListener('click', openAccordion);
});
</script>
{
"modifier": null,
"style": null,
"children": [
{
"component": "faqitem"
},
{
"component": "faqitem"
},
{
"component": "faqitem"
}
]
}
.FAQ {
&-answer {
> * {
transition: opacity $transition-time-default $transition-in-default;
}
}
&-item {
.icon._after::after {
display: none;
}
&.isOpen {
.FAQ-answer {
> * {
opacity: 1;
}
}
}
}
h4 {
display: block;
}
&-answer {
p:first-of-type {
margin-top: 0;
}
}
&-item + &-item {
margin-top: 1.5rem;
}
}
@media #{$mobile-media} {
.FAQ {
&-item {
border: 1px solid get-color(neutral, 100);
h4,
& &-heading {
position: relative;
display: flex;
padding: 1.25rem .75rem;
justify-content: space-between;
align-items: center;
background-color: theme-color(background, light);
cursor: pointer;
&.icon._after::after {
display: inline-block;
font-size: 1.25rem;
transform: rotate(90deg);
}
}
&.isOpen {
.icon._arrow._after::after {
transform: rotate(-90deg);
}
}
}
&-answer {
display: none;
> * {
opacity: 0;
}
p,
p:first-of-type {
margin: .75rem;
}
}
}
}
There are no notes for this item.