templates/includes/blocks/faqSection.html.twig line 1

Open in your IDE?
  1. <section class="faq-section bg-white text-blue lg:p-4" fade fade-trigger="scroll" section-shade="light">
  2.   <div class="big-container bg-light pt-12 px-[120px] pb-16">
  3.     <div class="w-full max-w-[1168px] mx-auto">
  4.       <nav batch-wrapp>
  5.         <ul class="projects-type-wrapp flex flex-wrap gap-x-2 md:gap-x-4 gap-y-4 md:gap-y-5">
  6.           <li fade fade-trigger="batch">
  7.             <button class="project-type-btn blue {{loop.first ? 'active'}}"
  8.               data-tab="{{ item.id|getFaqCategories|lower|replace({' ': "_"}) }}">
  9.               <svg>
  10.                 <use xlink:href="#icon-check" />
  11.               </svg>
  12.               {{ content.filterDefaultText }}
  13.             </button>
  14.           </li>
  15.           {% for item in content.categories %}
  16.           <li fade fade-trigger="batch">
  17.             <button class="project-type-btn blue"
  18.               data-tab="{{ item.id|getFaqCategories|lower|replace({' ': "_"}) }}">
  19.               <svg>
  20.                 <use xlink:href="#icon-check" />
  21.               </svg>
  22.               {{ item.id|getFaqCategories }}
  23.             </button>
  24.           </li>
  25.           {% endfor %}
  26.         </ul>
  27.       </nav>
  29.       {% set items = {} %}
  30.       {% set i = 0 %}
  31.       {% set sortedFaqs = content.faqs|sort((a, b) => a.descriptionSectionTitle <=> b.descriptionSectionTitle) %}
  32.       {% for item in sortedFaqs %}
  33.           {% set items = items|merge({
  34.               (i): {
  35.                   'descriptionSectionCategory': item.descriptionSectionCategory.id|getFaqCategories,
  36.                   'descriptionSectionTitle': item.descriptionSectionTitle,
  37.                   'descriptionSectionText': item.descriptionSectionText
  38.               }
  39.           }) %}
  40.           {% set i = i + 1 %}
  41.       {% endfor %}
  43.       <div class="tabs-wrapp flex flex-col gap-2 mt-10" fade fade-trigger="scroll">
  44.         {% for tab in content.categories %}
  45.           <div id='item_content' class="faq-tab flex flex-col gap-2" data-tab="{{tab.id|getFaqCategories|lower|replace({' ': "_"})}}">
  46.             {% for item in items %}
  47.              {% if tab.id|getFaqCategories == item.descriptionSectionCategory %}
  48.               <dl class="faq-item flex flex-col border border-transparent">
  49.                 <dt class="bg-white flex justify-between p-6 gap-3 cursor-default">
  50.                   <p id='item_title' class="text-lg md:text-2xl">
  51.                     {{item.descriptionSectionTitle}}
  52.                   </p>
  54.                   <button class="faq-item__button outline-none h-max rounded-md focus-visible:shadow-[0_0_0_5px_rgba(0,0,0,0.1)] duration-300 group">
  55.                     <svg class="faq-item__plus w-8 h-8 shrink-0 duration-300">
  56.                       <use xlink:href="#icon-plus" />
  57.                     </svg>
  58.                   </button>
  59.                 </dt>
  61.                 <dd class="faq-item__answer bg-gray h-0 overflow-hidden">
  62.                   <p class="text-sm m-6">{{item.descriptionSectionText|raw}}</p>
  63.                 </dd>
  64.               </dl>
  65.              {% endif %}
  66.             {% endfor %}
  67.            </div>
  68.         {% endfor %}
  69.       </div>
  70.     </div>
  71.   </div>
  72. </section>
  74. <script>
  75.   // JavaScript code to sort item_content divs by item_title
  76.   document.addEventListener('DOMContentLoaded', function () {
  77.     const faqTabs = document.querySelectorAll('.faq-tab');
  78.     const faqTabsWithTitles = [];
  80.     faqTabs.forEach((faqTab, index) => {
  81.       const itemTitle = faqTab.querySelector('#item_title').textContent;
  82.       faqTabsWithTitles.push({ element: faqTab, title: itemTitle, index });
  83.     });
  85.     faqTabsWithTitles.sort((a, b) => a.title.localeCompare(b.title));
  87.     const tabsWrapp = document.querySelector('.tabs-wrapp');
  88.     faqTabsWithTitles.forEach((faqTabWithTitle) => {
  89.       tabsWrapp.appendChild(faqTabWithTitle.element);
  90.     });
  91.   });
  92. </script>