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

Open in your IDE?
  1. {% block element_faq %}
  2.     {% set firstItem = element.config.groups.value[0].name %}
  3.     {% set groups = element.config.groups.value %}
  4.     <section class="nd-cms-el-faq faq lg:theme-grid boxed-layout my-4">
  5.         <div class="flex w-full flex-col overflow-hidden lg:flex-row lg:grid-gap-11 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
  6.             {% if groups | length > 1 %}
  7.                 {% block element_faq_ul_style %}
  8.                     <ul class="faq-select nav nav-tabs ml-10 flex md:flex-col flex-nowrap grid-gap-4 overflow-x-scroll flex-shrink-0 lg:w-[300px] md:mr-10 lg:mr-0 lg:block lg:overflow-visible">
  9.                         {% for group in groups %}
  10.                             {% set name = 'FAQ_' ~ loop.index %}
  12.                             <li class="custom-select-ul-child flex items-center grid-gap-4 text-base leading-8 text-black first:pl-8 last:pr-8 md:first:pl-0 md:last:pr-0">
  13.                                 <a class="tab-trigger border-b border-transparent whitespace-nowrap text-base py-2 text-black font-bold w-full flex grid-gap-4 justify-between items-center lg:whitespace-normal {% if loop.first %}active{% endif %}"
  14.                                    href="#{{ name }}_tab"
  15.                                    id="{{ name }}-tab"
  16.                                    data-toggle="tab"
  17.                                    role="tab"
  18.                                    aria-control="{{ name }}_tab"
  19.                                    aria-selected="true">
  20.                                     {{ group.name }}
  21.                                 </a>
  22.                                 {% if not loop.last %}
  23.                                     <span class="seperator md:hidden">&bull;</span>
  24.                                 {% endif %}
  25.                             </li>
  26.                         {% endfor %}
  27.                     </ul>
  28.                 {% endblock %}
  29.             {% endif %}
  30.             {% block element_faq_margin_top %}
  31.             <div class="faq-container tab-content mt-5 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 %}">
  32.                 {% endblock %}
  33.                 {% for group in groups %}
  34.                     {% set name = 'FAQ_' ~ loop.index %}
  35.                     <div class="faq-subject-container tab-pane fade {% if loop.first %}active show{% endif %} grid grid-gap-y-4"
  36.                          id="{{ name }}_tab"
  37.                          role="tabpanel"
  38.                          aria-labelledby="{{ name }}-tab">
  39.                         {% for key, qa in group.qa %}
  40.                             {% if qa.answer and qa.question %}
  41.                                 {% block  element_faq_style %}
  42.                                     <div class=" border-b border-grey-400 py-2 mb-10 mx-10 lg:mx-0"
  43.                                          x-data="{ id: {{ key }}, get expanded() { return this.active === this.id }, set expanded(value) { this.active = value ? this.id : null } }">
  45.                                         <div class="faq-question question-btn text-base font-bold text-black cursor-pointer leading-8 w-full flex"
  46.                                              x-on:click="expanded = !expanded"
  47.                                              :aria-expanded="expanded">
  48.                                         <span x-show="!expanded"
  49.                                               aria-hidden="true"
  50.                                               class="block w-6 h-6">+</span>
  51.                                             <span x-show="expanded"
  52.                                                   aria-hidden="true"
  53.                                                   class="block w-6 h-6">-</span>
  54.                                             {{ qa.question }}
  55.                                         </div>
  57.                                         <div class="faq-answer wysiwyg"
  58.                                              x-show="expanded" x-collapse.duration.500ms>
  59.                                             <div class="pt-3">
  60.                                                 {{ qa.answer|raw }}
  61.                                             </div>
  62.                                         </div>
  63.                                     </div>
  64.                                 {% endblock %}
  65.                             {% endif %}
  66.                         {% endfor %}
  67.                     </div>
  68.                 {% endfor %}
  69.             </div>
  70.         </div>
  71.     </section>
  72. {% endblock %}