<div class="faq-block">
<div class="faq-block__accordion js-accordion">
<div class="faq-block__group accordion js-accordion">
<div class="faq-block__heading js-accordion-trigger">
<div class="faq-block__heading--inner">
<em class="faq-block__headline">eybrowes</em>
<h2 class="faq-block__title">Producten</h2>
<script src="/components/raw/common-js/../collapsible/collapsible.js"></script>
<script src="/components/raw/common-js/../dropdown-list/dropdown-list.js"></script>
<script src="/components/raw/common-js/../tooltip/tooltip.js" defer></script>
<script src="/components/raw/common-js/../more-info/more-info.js" defer></script>
<script src="/components/raw/common-js/../modal/modal.js"></script>
<p class="faq-block__description">Wil je meer weten over producten, klik dan op de vraag en het antwoord verschijnt eronder</p>
</div>
</div>
<div class="faq-block__questions accordion__content js-accordion-content">
<div id="dropdown-faq" class="dropdown-list dropdown-list faq-block__dropdown-list">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
dit is een vraag
<svg
class="icon dropdown-list__icon dropdown-list__icon--inner"
role="presentation"
focusable="false"
>
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
dropdown-list__list block-nav__list
">
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
Information
<svg
class="icon dropdown-list__icon dropdown-list__icon--inner"
role="img"
>
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
faq-block__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
faq-block__link
" title="Hours">
Hours
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
faq-block__link
" title="About Us">
About Us
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
faq-block__link
" title="Contact Us">
Contact Us
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-faq'));
</script>
</div>
</div>
</div>
</div>
<div class="faq-block">
<div class="faq-block__accordion js-accordion">
<div class="faq-block__group accordion js-accordion">
<div class="faq-block__heading js-accordion-trigger">
<div class="faq-block__heading--inner">
<em class="faq-block__headline">{{ headline }}</em>
<h2 class="faq-block__title">{{ title }}</h2>
{{render @image }}
<p class="faq-block__description">{{ description }}</p>
</div>
</div>
<div class="faq-block__questions accordion__content js-accordion-content">
{{ render '@dropdown-list' faqList }}
</div>
</div>
</div>
</div>
{
"title": "Producten",
"headline": "eybrowes",
"description": "Wil je meer weten over producten, klik dan op de vraag en het antwoord verschijnt eronder",
"faqList": {
"id": "dropdown-faq",
"class": "dropdown-list faq-block__dropdown-list",
"dropdowns": [
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-customers\"",
"title": "dit is een vraag",
"id": "dropdown-customers",
"collapse": {
"class": "dropdown-list__icon dropdown-list__icon--inner",
"id": "angle-down",
"title": "Arrow down",
"hidden": true
},
"contentElement": "list--columns",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "dropdown-list__list block-nav__list",
"text": "dit is een antwoord"
}
},
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-information\"",
"title": "Information",
"id": "dropdown-information",
"collapse": {
"class": "dropdown-list__icon dropdown-list__icon--inner",
"id": "angle-down",
"title": "Arrow down"
},
"contentElement": "list--columns",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "faq-block__links-list",
"columns": [
{
"text": "Column 1",
"class": "list__column--hidden",
"elements": [
{
"text": "Hours",
"linkClass": "faq-block__link",
"link": "#",
"linkAttributes": "title=\"Hours\""
},
{
"text": "About Us",
"linkClass": "faq-block__link",
"link": "#",
"linkAttributes": "title=\"About Us\""
},
{
"text": "Contact Us",
"linkClass": "faq-block__link",
"link": "#",
"linkAttributes": "title=\"Contact Us\""
}
]
}
]
}
}
]
}
}
.faq-block {
width: 100%;
&__group {
display: flex;
flex-direction: column;
@include mq($screen-m) {
flex-direction: row;
//align-items: center;
}
}
&__heading {
width: 100%;
@include mq($screen-m) {
width: 50%;
}
&--inner {
@include mq($screen-m) {
margin: $spacer--xl;
padding: $spacer--xl;
box-shadow: 0 0 5px $gray;
}
}
}
&__content {
width: 100%;
@include mq($screen-m) {
width: 100%;
margin-top: $spacer--xl;
}
}
&__title {
text-align: center;
}
&__description {
text-align: center;
font-size: 14px;
}
&__image {
max-width: 75%;
margin: auto;
}
&__dropdown-list {
.dropdown-list__label {
font-size: $font-size-base;
}
.dropdown-list__content {
font-size: $font-size-base;
}
}
}
There are no notes for this item.