templates/front/slices/slice_questions_reponses.html.twig line 1

Open in your IDE?
  1. <section class="slice">
  2.     <div class="fluid-grid">
  3.         {% set thematics = get_thematic(slice.expertise.id) %}
  4.         {% if thematics|length > 0 %}
  5.             <div
  6.                 class="row"
  7.                 x-data='{
  8.                     selected: {{ thematics[0].id }},
  9.                     expertises: {{ thematics | json_encode | raw }},
  10.                     isOpen: false,
  11.                 }'
  12.             >
  13.                 <div class="col-12 md-col-3 relative">
  14.                     <button class="cta-arrow text-2xl text-violet p-5 rounded-lg w-full btn-select-faq" style="background-color: #F5F5F5; margin-bottom: 32px" @click="isOpen = !isOpen">
  15.                         <p x-text="thematics.find(e => e.id === selected)?.title"></p>
  16.                         <span class="cta-arrow__circle">
  17.                             <svg width="8" height="8" class="icon--white">
  18.                                 <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  19.                             </svg>
  20.                         </span>
  21.                     </button>
  23.                     <div
  24.                             class="p-5 rounded-lg width-fit-full absolute top-60px left-0 md:block"
  25.                             style="background-color: #F5F5F5"
  26.                             :class="{ 'hidden md:block': !isOpen }"
  27.                     >
  28.                         {% for thematic in thematics %}
  29.                             <button class="cta-arrow text-2xl text-violet mt-5 first:mt-0 opacity-50" @click="selected = {{ thematic.id }}; isOpen = false;" :class="{ 'opacity-100': selected === {{ thematic.id }} }">
  30.                                 {{ thematic.title }}
  31.                                 <span class="cta-arrow__circle opacity-0" :class="{ '!opacity-100': selected === {{ thematic.id }} }">
  32.                                     <svg width="8" height="8" class="icon--white">
  33.                                         <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  34.                                     </svg>
  35.                                 </span>
  36.                             </button>
  37.                         {% endfor %}
  38.                     </div>
  39.                 </div>
  41.                 <div class="col-12 md-col-9">
  43.                     {% for thematic in thematics %}
  44.                         <ul class="list-none" x-cloak x-show="selected === {{ thematic.id }}">
  45.                             {% set questions = get_questions([thematic.id]) %}
  46.                             {% for question in questions %}
  47.                                 {% include 'front/partials/cards/question_reponse-card.html.twig' %}
  48.                             {% endfor %}
  49.                         </ul>
  50.                     {% endfor %}
  51.                 </div>
  52.             </div>
  53.         {% endif %}
  54.     </div>
  55. </section>