Vebego Component Library

FAQs 

<div class="mol-faqs">
    <div class="faq-nav">
        <div class="faq-nav-mobile">
            <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>

                                <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                            </li>
                            <li class="active">
                                <a class="atm-nav-link " href="#faq-panel-1" title="[object Object]" aria-label="" target="">Onderwerp 2</a>

                                <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                            </li>
                            <li class="">
                                <a class="atm-nav-link " href="#faq-panel-2" title="[object Object]" aria-label="" target="">Onderwerp 3</a>

                                <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                            </li>
                            <li class="">
                                <a class="atm-nav-link " href="#faq-panel-3" title="[object Object]" aria-label="" target="">Onderwerp 4</a>

                                <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                            </li>
                            <li class="">
                                <a class="atm-nav-link " href="#faq-panel-4" title="[object Object]" aria-label="" target="">Onderwerp 5</a>

                                <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                            </li>
                        </ul>
                    </div>
                    <a class="inactive submenu-prev"><span class="atm-icon text-blue far fa-chevron-left   "></span></a>
                    <a class="inactive submenu-next"><span class="atm-icon text-blue far fa-chevron-right   "></span></a>
                </div>
            </div>
        </div>
        <ul class="faq-nav-desktop">
            <li class="">
                <a href="#faq-panel-0">
                    <span class="atm-icon  fas fa-chevron-right  fa-xs "></span>Onderwerp 1
                </a>
            </li>
            <li class="active">
                <a href="#faq-panel-1">
                    <span class="atm-icon  fas fa-chevron-right  fa-xs "></span>Onderwerp 2
                </a>
            </li>
            <li class="">
                <a href="#faq-panel-2">
                    <span class="atm-icon  fas fa-chevron-right  fa-xs "></span>Onderwerp 3
                </a>
            </li>
            <li class="">
                <a href="#faq-panel-3">
                    <span class="atm-icon  fas fa-chevron-right  fa-xs "></span>Onderwerp 4
                </a>
            </li>
            <li class="">
                <a href="#faq-panel-4">
                    <span class="atm-icon  fas fa-chevron-right  fa-xs "></span>Onderwerp 5
                </a>
            </li>
        </ul>
    </div>
    <div class="faq-panel faq-panel-0 hidden">
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 1</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 2</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 3</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <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>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 5</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 6</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <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>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 8</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 9</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <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>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 11</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 12</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <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>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 15</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
        <details>
            <summary>
                <div class="atm-heading h6">Dit is vraag 15</div>

                <span class="atm-icon icon-open fal fa-chevron-down  fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up  fa-md "></span>
            </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  ">
                    <span class="button-content">
                        <span>Lees de klantcase</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </details>
    </div>
</div>
 
<div class="mol-faqs">
    <div class="faq-nav">
        <div class="faq-nav-mobile">
            {{render '@submenu' categories merge=true}}
        </div>
        <ul class="faq-nav-desktop">
            {{#each categories.items}}
            <li class="{{#if active}}active{{/if}}">
                <a href="{{href}}">
                    {{render '@icon' @root.icon-chevron}}{{title.text}}
                </a>
            </li>
            {{/each}}
        </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"
            }
          }
        ]
      }
    ]
  }
}
  • Content: 
    .mol-faqs {
    @apply lg:flex gap-8;

    .faq-nav {
        @apply lg:min-w-[360px] lg:max-w-sm;

        .faq-nav-mobile {
            @apply lg:hidden;

            .mol-submenu {
                @apply bg-primary-100;
                @apply mb-8;

                .atm-heading {
                    @apply hidden;
                }

                .submenu-prev,
                .submenu-next {
                    @apply h-full;

                    .atm-icon {
                        @apply py-4;
                    }
                }

                .submenu-wrapper {
                    @apply p-4;
                }

                .submenu-list .atm-nav-link {
                    &.active,
                    &:hover {
                        @apply text-cta;
                    }
                }
            }
        }

        .faq-nav-desktop {
            @apply hidden lg:block p-16;
            @apply bg-primary-100;
            @apply select-none;

            li {
                @apply text-black;
                @apply font-bold;
                @apply font-display;

                + li {
                    @apply mt-8;
                }

                > a {
                    @apply relative inline-block;
                    @apply hover:text-primary;

                    .atm-icon {
                        @apply absolute hidden;
                        @apply left-0;
                        @apply mt-1;
                        top: 4.5px;
                    }
                }

                &.active {
                    > a {
                        @apply text-primary-700;
                        @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;
                }

                .atm-icon {
                    @apply mt-1 ml-4;

                    &.icon-open {
                        @apply inline;
                    }

                    &.icon-close {
                        @apply hidden;
                    }
                }
            }

            .card-body {
                @apply pb-4;
            }

            &[open] {
                summary {
                    .icon-open {
                        @apply hidden;
                    }

                    .icon-close {
                        @apply inline;
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/faqs/faqs.css
  • Filesystem Path: src\components\03-molecules\faqs\faqs.css
  • Size: 3.1 KB
  • Content: 
    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();
        });
    }
}

(function () {


    'use strict';

    [...document.querySelectorAll('.mol-faqs')].forEach(($el) => {

        const inst = new Faqs($el);
        inst.init();
    });

})();
  • URL: /components/raw/faqs/faqs.js
  • Filesystem Path: src\components\03-molecules\faqs\faqs.js
  • Size: 1 KB

No notes defined.