custom/static-plugins/NdVoorwindenTheme/src/Resources/views/storefront/element/cms-element-faq.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-faq.html.twig' %}
  2. {% block element_faq_margin_top %}
  3. <div class="boxed-layout my-4 faq-container tab-content w-full sm:inline-block lg:mt-0 {% if groups | length > 1 %}xl:col-span-9{% else %}xl:col-span-6 xl:col-start-4{% endif %}">
  4.     {% endblock %}
  6.     {% block element_faq_ul_style %}
  7.         <ul class="faq-select nav nav-tabs mb-4 flex md:flex-col flex-nowrap grid-gap-4 overflow-x-scroll flex-shrink-0 lg:w-[300px]  lg:block lg:overflow-visible">
  8.             {% for group in groups %}
  9.                 {% set name = 'FAQ_' ~ loop.index %}
  10.                 <li class="custom-select-ul-child font-montserrat uppercase active:no-underline text-[#0A0A0B] tracking-wider font-bold flex items-center grid-gap-4 text-base leading-8 text-black">
  11.                     <a class="tab-trigger border-b whitespace-nowrap active:no-underline text-sm lg:text-base py-2 text-black w-full flex grid-gap-4 justify-between items-center lg:whitespace-normal {% if loop.first %} active{% endif %}"
  12.                        href="#{{ name }}_tab"
  13.                        id="{{ name }}-tab"
  14.                        data-toggle="tab"
  15.                        role="tab"
  16.                        aria-control="{{ name }}_tab"
  17.                        aria-selected="true">
  18.                         {{ group.name }}
  19.                     </a>
  20.                     {% if not loop.last %}
  21.                         <span class="hidden">&bull;</span>
  22.                     {% endif %}
  23.                 </li>
  24.             {% endfor %}
  25.         </ul>
  26.     {% endblock %}
  28.     {% block  element_faq_style %}
  29.     <div class=" border-b border-[#C4C5CB] py-2"
  30.          x-data="{ id: {{ key }}, get expanded() { return this.active === this.id }, set expanded(value) { this.active = value ? this.id : null } }">
  31.         <div class="faq-question question-btn text-base font-bold text-grey-900 cursor-pointer leading-8 w-full flex justify-between"
  32.              x-on:click="expanded = !expanded" :aria-expanded="expanded">
  33.             {{ qa.question }}
  34.             <span
  35.                  aria-hidden="true"
  36.                   class="block w-6 h-6 transition-all duration-300 mt-1"
  37.                    x-bind:style="expanded = expanded ? 'transform: rotate(180deg);' : ''">
  38.                  {% sw_icon 'chevron-down' style{ 'pack': 'theme-icons', 'class': 'stroke full-size w-8' } %}
  39.             </span>
  40.         </div>
  42.            <div class="faq-answer wysiwyg"
  43.                  x-show="expanded" x-collapse.duration.500ms>
  44.                 <div class="text-grey-900 text-base leading-6 font-normal">
  45.                     {{ qa.answer|raw }}
  46.                 </div>
  47.             </div>
  48.         </div>
  49. {% endblock %}