templates/_snippets/accordion.html.twig line 1

Open in your IDE?
  1. {# ------------------------------------------------------------------------ #}
  2. {# ----------------------------- PARAMÉTRAGES ----------------------------- #}
  3. {# ------------------------------------------------------------------------ #}
  4. {% set content = accordion %}
  5. {% set accordionId = 'accordion-' ~ random() %}
  7. {% if accordion.isMenu|default(false) %}
  8. <div class="accordion-wrapper" id="{{ accordionId }}">
  9. <div class="accordion-menu">
  10. <ul>
  11. {% for group in accordion.groups %}
  12. <li><a href="#group-{{ loop.index }}">{{ group.titleGroup }}</a></li>
  13. {% endfor %}
  14. </ul>
  15. </div>
  16. <div class="accordion-content">
  17. {% for group in accordion.groups %}
  18. <{{ accordion.groupsTitleLevel|default('h2') }} class="group_title" id="group-{{ loop.index }}">{{ group.titleGroup }}</{{ accordion.groupsTitleLevel|default('h2') }}>
  19. <div class="accordion" id="accordion{{ loop.index }}">
  20. {% for element in group.elements %}
  21. <div class="accordion-item {{ accordion.borderElementsCheckbox is defined and accordion.borderElementsCheckbox is not same as(true) ? 'bordered' : '' }} {{ accordion.boxShadowElementsCheckbox is defined and accordion.boxShadowElementsCheckbox is same as(true) ? 'shadowed' : '' }}">
  22. <button class="accordion-button {% if element.active is not defined or not element.active %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.parent.loop.index }}-{{ loop.index }}" aria-expanded="{{ element.active|default(false) ? 'true' : 'false' }}" aria-controls="collapse{{ loop.parent.loop.index }}-{{ loop.index }}">
  23. {{ element.title }}
  24. </button>
  25. <div id="collapse{{ loop.parent.loop.index }}-{{ loop.index }}" class="accordion-collapse collapse {% if element.active|default(false) %}show{% endif %}" aria-labelledby="heading{{ loop.parent.loop.index }}-{{ loop.index }}" data-bs-parent="#accordion{{ loop.parent.loop.index }}">
  26. <div class="accordion-body">
  27. {{ element.content|raw }}
  29. {% for subelement in element.subsection %}
  30. <div class="accordion-item">
  31. <button class="accordion-button collapsed" type="button"
  32. data-bs-toggle="collapse"
  33. data-bs-target="#collapse-sub{{ loop.parent.loop.parent.loop.index }}-{{ loop.parent.loop.index }}-{{ loop.index }}"
  34. aria-expanded="false"
  35. aria-controls="collapse-sub{{ loop.parent.loop.parent.loop.index }}-{{ loop.parent.loop.index }}-{{ loop.index }}">
  36. {{ subelement.subtitle }}
  37. </button>
  38. <div id="collapse-sub{{ loop.parent.loop.parent.loop.index }}-{{ loop.parent.loop.index }}-{{ loop.index }}"
  39. class="accordion-collapse collapse"
  40. data-bs-parent="#accordion-sub{{ loop.parent.loop.parent.loop.index }}-{{ loop.parent.loop.index }}">
  41. <div class="accordion-body">
  42. {{ subelement.subcontent|raw }}
  43. </div>
  44. </div>
  45. </div>
  46. {% endfor %}
  48. </div>
  49. </div>
  50. </div>
  51. {% endfor %}
  52. </div>
  53. {% endfor %}
  54. </div>
  55. </div>
  56. {% else %}
  57. <div id="{{ accordionId }}">
  58. {% for group in accordion.groups %}
  59. <h2 class="group_title" id="group-{{ loop.index }}">{{ group.titleGroup }}</h2>
  60. <div class="accordion-content">
  61. <div class="accordion" id="accordion{{ loop.index }}">
  62. {% for element in group.elements %}
  63. <div class="accordion-item {{ accordion.borderElementsCheckbox is defined and accordion.borderElementsCheckbox is not same as(true) ? 'bordered' : '' }} {{ accordion.boxShadowElementsCheckbox is defined and accordion.boxShadowElementsCheckbox is same as(true) ? 'shadowed' : '' }}">
  64. <button class="accordion-button {% if element.active is not defined or not element.active %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.parent.loop.index }}-{{ loop.index }}" aria-expanded="{{ element.active|default(false) ? 'true' : 'false' }}" aria-controls="collapse{{ loop.parent.loop.index }}-{{ loop.index }}">
  65. {{ element.title }}
  66. </button>
  67. <div id="collapse{{ loop.parent.loop.index }}-{{ loop.index }}" class="accordion-collapse collapse {% if element.active|default(false) %}show{% endif %}" aria-labelledby="heading{{ loop.parent.loop.index }}-{{ loop.index }}" data-bs-parent="#accordion{{ loop.parent.loop.index }}">
  68. <div class="accordion-body">
  69. {{ element.content|raw }}
  71. {% for subelement in element.subsection %}
  72. <div class="accordion-item">
  73. <button class="accordion-button collapsed" type="button"
  74. data-bs-toggle="collapse"
  75. data-bs-target="#collapse-sub{{ loop.parent.loop.parent.loop.index }}-{{ loop.parent.loop.index }}-{{ loop.index }}"
  76. aria-expanded="false"
  77. aria-controls="collapse-sub{{ loop.parent.loop.parent.loop.index }}-{{ loop.parent.loop.index }}-{{ loop.index }}">
  78. {{ subelement.subtitle }}
  79. </button>
  80. <div id="collapse-sub{{ loop.parent.loop.parent.loop.index }}-{{ loop.parent.loop.index }}-{{ loop.index }}"
  81. class="accordion-collapse collapse"
  82. data-bs-parent="#accordion-sub{{ loop.parent.loop.parent.loop.index }}-{{ loop.parent.loop.index }}">
  83. <div class="accordion-body">
  84. {{ subelement.subcontent|raw }}
  85. </div>
  86. </div>
  87. </div>
  88. {% endfor %}
  89. </div>
  90. </div>
  91. </div>
  92. {% endfor %}
  93. </div>
  94. </div>
  95. {% endfor %}
  96. </div>
  97. {% endif %}
  99. <!-- Variables CSS dynamiques -->
  100. <style>
  101. #{{ accordionId }} {
  102. /* Paramétrage des couleurs */
  103. --active-tab-color: {{ accordion.tagActiveColor|default('#000') }};
  104. --active-tag-bg-color: {{ accordion.tagActiveBackgroundColor|default('#fff') }};
  105. --closed-tabs-color: {{ accordion.tagClosedColor|default('#000') }};
  106. --closed-tabs-bg-color: {{ accordion.tagClosedBackgroundColor|default('#fff') }}; */
  107. --chevrons-color: {{ accordion.chevronsColor|default('#000') }};
  108. --active-chevrons-color: {{ accordion.chevronsActiveColor|default('#000') }};
  109. --borders-color: {{ accordion.borderColorElements|default('#000') }};
  111. /* Paramétrage des titres */
  112. --groups-title-size: {{ accordion.groupsTitleSize|default('1.25') ~ accordion.groupsTitleSizeUnit|default('rem') }};
  113. --groups-title-margin-bottom: {{ accordion.marginBottomGroupsTitle|default('1') ~ accordion.marginBottomGroupsTitleUnit|default('rem') }};
  114. --elements-title-size: {{ accordion.elementsTitleSize|default('1') ~ accordion.elementsTitleSizeUnit|default('rem') }};
  115. --elements-title-weight: {{ accordion.elementsTitleWeight|default('700') }};
  117. /* Autres Paramètres */
  118. --borders-radius: {{ accordion.bordersRadius|default('0') ~ accordion.bordersRadiusUnit|default('px') }};
  119. --elements-margin-bottom: {{ accordion.marginBottomElements|default('1') ~ accordion.marginBottomElementsUnit|default('rem') }};
  121. /* Paramètres du menu */
  122. --elements-menu-color: {{ accordion.menuElementsColor|default('#000') }};
  123. --elements-menu-color-hovered: {{ accordion.menuElementsHoveredColor|default('#000') }};
  124. --elements-menu-size: {{ accordion.menuElementsSize|default('1') ~ accordion.menuElementsSizeUnit|default('rem') }};
  125. --menu-bg: {{ accordion.menuBackgroundColor|default('#fff') }};
  127. --groups-margin-bottom: {{ accordion.marginBottomGroups|default('1') ~ accordion.marginBottomGroupsUnit|default('rem') }};
  129. /* Paramètres de la bordure */
  130. --elements-border-size: {{ accordion.borderSizeElements|default('1') ~ accordion.borderSizeElementsUnit|default('rem') }};
  132. /* Paramètres de l'ombre portée */
  133. --elements-bs: {{ accordion.boxShadowPosXElements|default('0') ~ accordion.boxShadowUnitElements|default('px') ~ ' ' ~ accordion.boxShadowPosYElements|default('0') ~ accordion.boxShadowUnitElements|default('px') ~ ' ' ~ accordion.boxShadowSpreadElements|default('0') ~ accordion.boxShadowUnitElements|default('px') ~ ' ' ~ accordion.borderColorElements|default('#000') }};
  134. }
  135. </style>