templates/theme/default/modele-widget/faq_block.html.twig line 1

Open in your IDE?
  1. {% if faqs is defined and faqs is not empty %}
  3. {% set images = [
  4. asset('uploads/faq/cm2.webp'),
  5. asset('uploads/faq/wf.webp')
  6. ] %}
  8. <div id="faq-section" class="py-5"
  9. {% if widget.bgimage %} style="background: url({{asset_image(widget.bgimage)}})"
  10. {% elseif widget.bgcolor %} style="background-color:{{widget.bgcolor}}"
  11. {% endif %}>
  13. <div class="container-fluid content-wrapper">
  15. <!-- TITLE -->
  16. <div class="row">
  17. <div class="col-6 text-center ">
  18. {% if widget.title %}
  19. <h2 class="title">{{ widget.title|raw }}</h2>
  20. {% endif %}
  22. {% if widget.subTitle %}
  23. <h3 class="sub-title">{{ widget.subTitle|raw }}</h3>
  24. {% endif %}
  26. {% if widget.description %}
  27. <p>{{ widget.description|raw }}</p>
  28. {% endif %}
  29. </div>
  30. </div>
  32. <!-- CONTENT -->
  33. <div class="row align-items-center">
  35. <!-- LEFT SIDE (FAQ) -->
  36. <div class="col-lg-6 col-12">
  38. {% for item in faqs %}
  39. <div class="faq-item"
  40. data-image="{{ images[loop.index0 % images|length] }}">
  42. <div class="faq-question d-flex justify-content-between">
  43. <span>{{ item.question }}</span>
  44. <span class="icon-plus"></span>
  45. </div>
  47. <div class="faq-answer">
  48. <div class="content-answer">
  49. {{ item.reponse|replace({'\r\n':'<br />'})|raw }}
  50. </div>
  51. </div>
  53. </div>
  54. {% endfor %}
  56. </div>
  58. <!-- RIGHT SIDE (IMAGE) -->
  59. <div class="col-lg-6 col-12 mt-4 mt-lg-0 d-flex justify-content-center">
  60. <div class="faq-composition">
  61. <div class="img-bg-wrapper">
  62. <img src="{{ asset('uploads/faq/cm2.webp') }}" alt="Background" width="506" height="577">
  63. </div>
  65. <div class="img-overlay-wrapper">
  66. <img src="{{ asset('uploads/faq/wf.webp') }}" alt="Overlay" width="274" height="336">
  67. </div>
  68. </div>
  69. </div>
  71. </div>
  73. </div>
  74. </div>
  75. <script>
  76. document.addEventListener("DOMContentLoaded", function () {
  78. const items = document.querySelectorAll(".faq-item");
  79. const image = document.getElementById("faq-main-image");
  81. if (!image) return;
  83. items.forEach(item => {
  85. // 👉 CHANGE IMAGE ON HOVER
  86. item.addEventListener("mouseenter", function () {
  87. const newImg = this.dataset.image;
  89. if (!newImg) return;
  91. image.style.opacity = 0;
  93. setTimeout(() => {
  94. image.src = newImg;
  95. image.style.opacity = 1;
  96. }, 150);
  97. });
  99. });
  101. });
  102. </script>
  103. {% endif %}