<div class="container faq-block">
<div class="row">
<div class="faq-block--accordion js-accordion col-md-12">
<div class="accordion js-accordion">
<div class="faq-block--title js-accordion-trigger">
<h3>
Bestellingen
</h3>
</div>
<div class="faq-block__content accordion__content js-accordion-content">
<div id="dropdown-default" class="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-1">
Hoe kan ik een bestelling plaatsen?
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
<blockquote>
Blockquote
<cite>
<a href="#">
Quotation source
</a>
</cite>
</blockquote>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-2">
Kan ik met credit card betalen en welke mogelijkheden zijn er nog meer?
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
<pre>
Preformatted text
</pre>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-3">
Ik heb een sportschool. Kan ik bij jullie inkopen?
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
<div class="paragraph">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
<a href="#">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</a>
</p>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</span>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</pre>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</blockquote>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-default'));
</script>
</div>
</div>
</div>
</div>
</div>
<div class="container faq-block">
<div class="row">
<div class="faq-block--accordion js-accordion col-md-12">
<div class="accordion js-accordion">
<div class="faq-block--title js-accordion-trigger">
<h3>
{{{ faqTitle}}}
</h3>
</div>
<div class="faq-block__content accordion__content js-accordion-content" >
{{ render '@dropdown-list' list }}
</div>
</div>
</div>
</div>
</div>
{
"faqTitle": "Bestellingen",
"list": {
"id": "dropdown-default",
"dropdowns": [
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\"",
"title": "Hoe kan ik een bestelling plaatsen?",
"id": "dropdown-1",
"collapse": {
"id": "angle-down",
"title": "Arrow down",
"class": "dropdown-list__icon",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "blockquote"
},
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\"",
"title": "Kan ik met credit card betalen en welke mogelijkheden zijn er nog meer?",
"id": "dropdown-2",
"collapse": {
"id": "angle-down",
"title": "Arrow down",
"class": "dropdown-list__icon",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "preformatted"
},
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\"",
"title": "Ik heb een sportschool. Kan ik bij jullie inkopen?",
"id": "dropdown-3",
"collapse": {
"id": "angle-down",
"title": "Arrow down",
"class": "dropdown-list__icon",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "paragraph"
}
]
}
}
.faq-block {
margin-bottom: 50px;
display: flex;
flex-direction: column;
box-shadow: $box-shadow;
border-radius: $border-radius;
&--title {
display: flex;
flex-direction: row;
padding: 15px;
background: $red;
color: #fff;
& h3 {
justify-content: flex-start;
flex: 1;
margin: 0;
color: $white;
}
& .icon {
justify-content: flex-end;
fill: $white;
}
}
&__content {
& ul.list.block-nav__list {
padding: 25px;
background: #f5f5f5;
}
}
}
There are no notes for this item.