<div class="mol-faqs">
<div class="faq-nav">
<svg class="ambient absolute -z-10 h-full w-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1401 561" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_732_31)">
<path class="animate-wiggle" d="M-2050.14 -204.345L1538.67 -2276.34L3610.67 1312.46L21.8563 3384.46L-2050.14 -204.345Z" fill="url(#paint0_linear_732_31)" />
<path class="animate-wiggle" opacity="0.35" d="M-235.763 -1021.04C184.007 -844.351 514.379 -368.568 498.964 32.3718C481.557 487.334 63.3508 859.84 -256.582 932.059C-576.515 1004.28 -869.519 656.538 -468.412 471.643C-67.3055 286.749 116.195 264.613 302.527 -1.01921C259.546 -168.006 -47.7195 -422.581 -483.652 -646.742C-845.528 -833.228 -639.19 -1190.84 -235.763 -1021.04ZM743.374 -403.471C551.089 -574.814 489.961 -1069.37 661.244 -1309.44C793.684 -1495.02 1076.36 -1333.68 1004.04 -1160.87C858.856 -813.25 857.106 -584.44 881.882 -502.563C1123.47 -371.494 1565.15 -600.068 1652.51 -628.004C1865.35 -695.764 2057.55 -489.499 1784.38 -336.284C1318.25 -75.0371 933.111 -234.594 743.374 -403.471ZM2441.76 28.8834C2740.56 160.667 2742.79 590.227 2272.6 525.9C1818.24 463.679 1215.21 334.868 855.28 500.489C776.87 717.311 898.58 1141.45 1223.94 1711.81C1463.93 2132.35 883.395 2305.53 644.6 1988.36C335.85 1578.27 206.665 902.528 641.102 364.285C870.363 79.4919 1630.36 -328.355 2441.76 28.8834Z" fill="#562081" />
<path class="animate-wiggle" d="M619.906 283.605C1040.16 304.998 1934.43 736.16 2151.54 1733.93C2231.54 2101.51 1833.08 2394.62 1574.58 1912.78C1324.5 1447.48 1036.08 798.822 638.144 575.386C382.987 648.953 70.9201 1049.81 -239.065 1738.82C-468.239 2247.19 -1022.52 1824.1 -889.306 1386.33C-717.037 821.296 -175.264 243.348 619.906 283.605Z" fill="url(#paint2_linear_732_31)" />
<path class="animate-wiggle-2" d="M831.823 -74.8587C396.739 216.832 -233.363 80.0584 -517.676 -168.618C-801.989 -417.294 -676.358 -925.148 -232.682 -677.367C210.995 -429.586 356.12 -273.778 730.026 -280.429C856.731 -433.447 885.528 -891.581 799.415 -1449.29C728.136 -1912.07 1201.02 -1961.81 1315.63 -1471.74C1435.17 -961.448 1215.23 -332.216 831.823 -74.8587Z" fill="url(#paint3_linear_732_31)" />
</g>
<defs>
<linearGradient id="paint0_linear_732_31" x1="3569.5" y1="1265.2" x2="-2038.5" y2="-164.605" gradientUnits="userSpaceOnUse">
<stop stop-color="#501D79" />
<stop offset="0.1001" stop-color="#562081" />
<stop offset="0.4029" stop-color="#980D7F" />
<stop offset="0.5587" stop-color="#871280" />
<stop offset="0.8653" stop-color="#5C1E81" />
<stop offset="0.9028" stop-color="#562081" />
<stop offset="1" stop-color="#501D79" />
</linearGradient>
<linearGradient id="paint1_linear_732_31" x1="1940.44" y1="-897.473" x2="1576.67" y2="1225.63" gradientUnits="userSpaceOnUse">
<stop stop-color="#B92D85" stop-opacity="0.7" />
<stop offset="0.2185" stop-color="#C44072" stop-opacity="0.7655" />
<stop offset="0.6611" stop-color="#DF703F" stop-opacity="0.8983" />
<stop offset="1" stop-color="#F69915" />
</linearGradient>
<linearGradient id="paint2_linear_732_31" x1="1683.94" y1="1213.25" x2="-473.832" y2="1087.84" gradientUnits="userSpaceOnUse">
<stop stop-color="#D62B87" stop-opacity="0.7" />
<stop offset="0.2013" stop-color="#C02084" stop-opacity="0.7" />
<stop offset="0.505" stop-color="#980D7F" stop-opacity="0.7" />
<stop offset="0.9013" stop-color="#3F2584" stop-opacity="0.7" />
<stop offset="1" stop-color="#282B85" stop-opacity="0.7" />
</linearGradient>
<linearGradient id="paint3_linear_732_31" x1="-150.413" y1="-274.39" x2="1381.97" y2="-1527.36" gradientUnits="userSpaceOnUse">
<stop stop-color="#651B82" />
<stop offset="0.9974" stop-color="#901080" />
</linearGradient>
<clipPath id="clip0_732_31">
<rect width="1401" height="561" fill="white" />
</clipPath>
</defs>
</svg>
<div class="faq-nav-mobile">
<div>
<div class="mol-submenu">
<h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
<div class="submenu-wrapper">
<div class="submenu-viewport">
<ul class="submenu-list">
<li class="">
<a class="atm-nav-link " href="#faq-panel-0" title="[object Object]" aria-label="" target="">Onderwerp 1</a>
</li>
<li class="active">
<a class="atm-nav-link " href="#faq-panel-1" title="[object Object]" aria-label="" target="">Onderwerp 2</a>
</li>
<li class="">
<a class="atm-nav-link " href="#faq-panel-2" title="[object Object]" aria-label="" target="">Onderwerp 3</a>
</li>
<li class="">
<a class="atm-nav-link " href="#faq-panel-3" title="[object Object]" aria-label="" target="">Onderwerp 4</a>
</li>
<li class="">
<a class="atm-nav-link " href="#faq-panel-4" title="[object Object]" aria-label="" target="">Onderwerp 5</a>
</li>
</ul>
</div>
<a class="inactive submenu-prev"> <i class="atm-icon text-blue far fa-chevron-left "></i>
</a>
<a class="inactive submenu-next"> <i class="atm-icon text-blue far fa-chevron-right "></i>
</a>
</div>
</div>
</div>
</div>
<ul class="faq-nav-desktop">
<div class="faq-nav-wrapper">
<li class="">
<a href="#faq-panel-0">
<i class="atm-icon fas fa-chevron-right fa-xs "></i>
Onderwerp 1
</a>
</li>
<li class="active">
<a href="#faq-panel-1">
<i class="atm-icon fas fa-chevron-right fa-xs "></i>
Onderwerp 2
</a>
</li>
<li class="">
<a href="#faq-panel-2">
<i class="atm-icon fas fa-chevron-right fa-xs "></i>
Onderwerp 3
</a>
</li>
<li class="">
<a href="#faq-panel-3">
<i class="atm-icon fas fa-chevron-right fa-xs "></i>
Onderwerp 4
</a>
</li>
<li class="">
<a href="#faq-panel-4">
<i class="atm-icon fas fa-chevron-right fa-xs "></i>
Onderwerp 5
</a>
</li>
</div>
</ul>
</div>
<div class="faq-panel faq-panel-0 hidden">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 1</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 2</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 3</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
<div class="faq-panel faq-panel-1 ">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 4</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 5</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 6</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
<div class="faq-panel faq-panel-2 hidden">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 7</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 8</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 9</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
<div class="faq-panel faq-panel-3 hidden">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 10</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 11</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 12</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
<div class="faq-panel faq-panel-4 hidden">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 13</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 15</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 15</div>
<i class="atm-icon icon-open fal fa-chevron-down fa-md "></i>
<i class="atm-icon icon-close fal fa-chevron-up fa-md "></i>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
</div>
<div class="mol-faqs">
<div class="faq-nav">
{{render '@ambient'}}
<div class="faq-nav-mobile">
<div>
{{render '@submenu' categories merge=true}}
</div>
</div>
<ul class="faq-nav-desktop">
<div class="faq-nav-wrapper">
{{#each categories.items}}
<li class="{{#if active}}active{{/if}}">
<a href="{{href}}">
{{render '@icon' @root.icon-chevron}}{{title.text}}
</a>
</li>
{{/each}}
</div>
</ul>
</div>
{{#each categories.items}}
<div class="faq-panel faq-panel-{{@index}} {{#unless active}}hidden{{/unless}}">
{{#each faqs}}
<details>
<summary>
{{render '@heading' heading}}
{{render '@icon' @root.icon-open}}{{render '@icon' @root.icon-close}}
</summary>
<div class="card-body">
{{render '@paragraph'}}
{{render '@button-primary'}}
</div>
</details>
{{/each}}
</div>
{{/each}}
</div>
{
"icon-open": {
"style": "fal",
"icon": "fa-chevron-down",
"modifier": "icon-open",
"size": "fa-md"
},
"icon-close": {
"style": "fal",
"icon": "fa-chevron-up",
"modifier": "icon-close",
"size": "fa-md"
},
"icon-chevron": {
"style": "fas",
"icon": "fa-chevron-right",
"size": "fa-xs"
},
"categories": {
"heading": false,
"items": [
{
"text": "Onderwerp 1",
"title": {
"tag": "div",
"modifier": "h-subtitle",
"text": "Onderwerp 1"
},
"href": "#faq-panel-0",
"faqs": [
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 1"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 2"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 3"
}
}
]
},
{
"text": "Onderwerp 2",
"title": {
"tag": "div",
"modifier": "h-subtitle",
"text": "Onderwerp 2"
},
"href": "#faq-panel-1",
"active": true,
"faqs": [
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 4"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 5"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 6"
}
}
]
},
{
"text": "Onderwerp 3",
"title": {
"tag": "div",
"modifier": "h-subtitle",
"text": "Onderwerp 3"
},
"href": "#faq-panel-2",
"faqs": [
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 7"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 8"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 9"
}
}
]
},
{
"text": "Onderwerp 4",
"title": {
"tag": "div",
"modifier": "h-subtitle",
"text": "Onderwerp 4"
},
"href": "#faq-panel-3",
"faqs": [
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 10"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 11"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 12"
}
}
]
},
{
"text": "Onderwerp 5",
"title": {
"tag": "div",
"modifier": "h-subtitle",
"text": "Onderwerp 5"
},
"href": "#faq-panel-4",
"faqs": [
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 13"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 15"
}
},
{
"heading": {
"tag": "div",
"modifier": "h6",
"text": "Dit is vraag 15"
}
}
]
}
]
}
}
.mol-faqs {
@apply lg:flex gap-8 mt-8;
.faq-nav {
@apply lg:min-w-[360px] lg:max-w-sm relative overflow-hidden;
.faq-nav-mobile {
@apply lg:hidden relative;
.mol-submenu {
@apply m-0;
.atm-heading {
@apply hidden;
}
.submenu-prev,
.submenu-next {
@apply h-full;
.atm-icon {
@apply py-4;
}
}
.submenu-prev {
@apply text-white left-0;
background-image: linear-gradient(
to right,
#990d7f 10%,
transparent
);
}
.submenu-next {
@apply text-white right-0;
background-image: linear-gradient(
to left,
#990d7f 10%,
transparent
);
}
.submenu-wrapper {
@apply py-4 px-4;
}
.submenu-viewport {
@apply border-b-0;
}
.submenu-list .atm-nav-link {
@apply text-white py-2;
&.active,
&:hover {
@apply opacity-75;
}
}
.submenu-list .active .atm-nav-link {
@apply mt-0 border-b-0 font-bold;
}
}
}
.faq-nav-desktop {
@apply hidden lg:block relative;
@apply select-none;
.faq-nav-wrapper {
@apply p-16;
}
li {
@apply text-white;
@apply font-display;
+ li {
@apply mt-8;
}
> a {
@apply relative inline-block;
@apply hover:opacity-75;
.atm-icon {
@apply absolute hidden;
@apply left-0;
@apply mt-1;
top: 4.5px;
}
}
&.active {
@apply font-bold;
> a {
@apply text-white;
@apply pl-3;
.atm-icon {
@apply block;
}
}
}
}
}
}
.faq-panel {
@apply w-full;
details {
@apply border-b border-solid border-gray-200;
summary {
@apply cursor-pointer;
@apply list-none;
@apply flex justify-between text-left w-full;
@apply py-6;
border: none;
.atm-heading {
@apply m-0;
}
& > * {
@apply inline;
@apply pointer-events-none;
}
.atm-icon {
@apply mt-1 ml-4;
&.icon-open {
@apply inline;
}
&.icon-close {
@apply hidden;
}
}
}
.card-body {
@apply pb-4;
@apply w-11/12;
}
&[open] {
summary {
.icon-open {
@apply hidden;
}
.icon-close {
@apply inline;
}
}
}
}
}
}
class Faqs {
constructor($el) {
this.$el = $el;
}
init() {
var self = this;
var $links = $(self.$el).find('.faq-nav-mobile li a, .faq-nav-desktop li a');
$links.on('click', function(e) {
e.preventDefault();
var $this = $(this);
var hash = $this.prop('hash');
var selector = hash.replace('#', '.');
$links.parent()
.removeClass('active');
$links
.filter('[href="' + hash + '"]')
.parent()
.addClass('active');
$(self.$el)
.find('.faq-panel')
.hide()
.filter(selector)
.show();
});
this.initDetailsToggle();
}
initDetailsToggle() {
var self = this;
// Ensure the first FAQ item inside each .faq-panel is open by default
$(self.$el).find('.faq-panel').each(function() {
$(this).find('details:first').each(function() {
$(this).removeClass('faq-panel-closed').addClass('faq-panel-open').attr('open', true);
});
});
// Attach click event to all summary elements to toggle the open/closed state
$(self.$el).find('details summary').on('click', function() {
var $details = $(this).parent();
if ($details.hasClass('faq-panel-closed')) {
$details.removeClass('faq-panel-closed').addClass('faq-panel-open');
} else {
$details.removeClass('faq-panel-open').addClass('faq-panel-closed');
}
});
}
}
(function () {
'use strict';
[...document.querySelectorAll('.mol-faqs')].forEach(($el) => {
const inst = new Faqs($el);
inst.init();
});
})();
No notes defined.