templates/faq/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}{% endblock %}
  3. {% block stylesheets %}
  4.         <link rel="stylesheet" href="{{ asset('css/style-faq-index.css') }}">
  5.         <link rel="stylesheet" href="{{ asset('/css/centre-ressource.css') }}">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/> 
  7. {% endblock %}
  8. {% block body %}
  9.   <main class="section-services"></main>
  10. <div class="section-FAQ">
  11.     <div class="container">
  12.     <div class="row">
  13.         <div class="col-md-12 text-center">
  14.           <h5>{% trans %} faq.title{% endtrans %}</h5>
  15.           <h2>Lorem ipsum dolor</h2>
  16.           <p>Lorem ipsum dolor sit amet invidunt ut labore et sed diam voluptua. At vero eos et accusam et sed diam voluptua.</p>
  17.         </div>
  18.       </div>
  19.  <div class="row justify-content-center mt-5">
  20.         <div class="col-md-4">
  21.             <ul id="nav-tabs-wrapper" class="nav nav-pills nav-stacked flex-column">
  22.             {% for faq in faqs %}
  23.                 <li class="accordion-item active" id="accordion_faq">
  24.                  <a style="text-decoration: none;" href="#vtab{{ loop.index }}" data-toggle="tab"> <h5>{{ faq.title }}</h5></a>
  25.                 </li>
  26.             {% endfor %}
  27.             </ul>
  28.            </div>
  29.         <div class="col-md-8">
  30.             <div class="tab-content">
  31.                 {% for faq in faqs %}
  32.                 <div role="tabpanel" class="tab-pane fade in {% if loop.index == 1 %} show  active {% endif %}" id="vtab{{ loop.index }}">
  33.                 <div class="accordion-item" >
  34.                   {% for elem in faq.faqs %}
  35.                   <header class="item-header accordion_faq {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}"  id="accordion_faq" >
  36.                       <h4 class="item-question" >
  37.                           {{ elem.question | raw}}
  38.                          </h4>
  39.                         <div class="item-icon" >
  40.                         <i class="fa-sharp fa-solid fa-angle-up"></i>
  41.                       </div>
  42.                   </header>
  43.                   <div class="item-content {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  44.                       <p class="item-answer" >
  45.                           {{ elem.reponse | raw}}                    
  46.                       </p>
  47.                   </div>
  48.                   {% endfor %}
  49.                   </div>
  50.                   </div>
  51.                 {% endfor %}
  52.             </div>
  53.         </div>
  54.                               <a  ><button id="addMore" class="btn-slider-text mt-5">{% trans %} faq.showmore{% endtrans %}</button></a>
  56.         {# <div class="navigation">
  57.             {{ knp_pagination_render(faqs) }}
  58.         </div> #}
  59.     </div>
  60.   </div>
  61. </div>
  62. {% endblock %}
  63. {% block javascripts %}
  64. {{ parent() }}
  65. <script>
  66. let offset = 2;
  67. $('#addMore').on('click',function () {
  68.     $.ajax({
  69.         type: "GET",
  70.         url: '/ajax/get/faqtheme',
  71.         data: {'offset': offset},
  72.         success: function (response) {
  73.             console.log(response)
  74.            JSON.parse(response).map((value, index)=>{
  75.             $("#nav-tabs-wrapper").append(`
  76.                 <li class="accordion-item " id="accordion_faq">
  77.                  <a style="text-decoration: none;" href="#vtab${value.id}" data-toggle="tab"> <h5>${value.title}</h5></a>
  78.                 </li>
  79.             `)
  80.            })
  81.            JSON.parse(response).map((value, index)=>{
  82.                let div =`
  83.                <div role="tabpanel" class="tab-pane fade in" id="vtab${value.id}">
  84.                     <div class="accordion-item" >
  85.                `;
  86.                
  87.                 value.faqs.map((value2,index2)=>{
  88.                     div=div+`<header class="item-header"  id="accordion_faq" >
  89.                             <h4 class="item-question" >
  90.                                 ${value2.question}
  91.                                 </h4>
  92.                                 <div class="item-icon" >
  93.                                 <i class="fa-sharp fa-solid fa-angle-up"></i>
  94.                             </div>
  95.                             </header>
  96.                         <div class="item-content ">
  97.                             <p class="item-answer"  >
  98.                                 ${value2.reponse}             
  99.                             </p>
  100.                         </div>`
  101.                     console.log(div)
  102.                    
  103.                     {# div= div +          
  104.                     `<header class="item-header"  id="accordion_faq" >
  105.                             <h4 class="item-question" >
  106.                                 ${value2.question}
  107.                                 </h4>
  108.                                 <div class="item-icon" >
  109.                                 <i class="fa-sharp fa-solid fa-angle-up"></i>
  110.                             </div>
  111.                         </header>
  112.                         <div class="item-content">
  113.                             <p class="item-answer"  >
  114.                                 ${value2.reponse}             
  115.                             </p>
  116.                         </div>
  117.                     `;
  118.                      #}
  119.                 });
  120.                 div=div+"</div></div>"
  121.                 $(".tab-content").append(div)
  122.                  
  123.             });
  124.             const accordionBtns = document.querySelectorAll(".item-header");
  126.             accordionBtns.forEach((accordion) => {
  127.             accordion.onclick = function () {
  128.                 this.classList.toggle("active");
  130.                 let content = this.nextElementSibling;
  131.                 console.log(content);
  133.                 if (content.style.maxHeight) {
  134.                 //this is if the accordion is open
  135.                 content.style.maxHeight = null;
  136.                 } else {
  137.                 //if the accordion is currently closed
  138.                 content.style.maxHeight = content.scrollHeight + "px";
  139.                 console.log(content.style.maxHeight);
  140.                 }
  141.             };
  142.             
  143.             });
  144.             offset = offset + 3
  145.             console.log(offset)
  146.         }
  147.         
  148.     });
  149. });
  150. </script>
  151. {% endblock %}