Fix FAQ accordion structure (#2388)

.changeset/witty-eyes-sin.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix FAQ accordion structure

preview/pages/faq.html

@@ -13,13 +13,18 @@ permalink: faq.html
 			{% assign categories-loop = forloop %}
 			<div>
 				<h2 class="mb-3">{{ categories-loop.index }}. {{ category.name }}</h2>
-				<div id="faq-{{ categories-loop.index }}" class="accordion" role="tablist" aria-multiselectable="true">
+				<div id="faq-{{ categories-loop.index }}" class="accordion accordion-tabs" role="tablist" aria-multiselectable="true">
 					{% for question in category.questions %}
 					{% assign questions-loop = forloop %}
 					<div class="accordion-item">
-						<button class="accordion-header{% unless questions-loop.index == 1 %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#faq-{{ categories-loop.index }}-{{ questions-loop.index }}" role="tab">
-							<h4 class="accordion-header-text">{{ question.question }}</h4>
-						</button>
+						<div class="accordion-header">
+							<button class="accordion-button{% unless questions-loop.index == 1 %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#faq-{{ categories-loop.index }}-{{ questions-loop.index }}" role="tab">
+								{{ question.question }}
+								<div class="accordion-button-toggle">
+									{% include "ui/icon.html" icon="chevron-down" %}
+								</div>
+							</button>
+						</div>
 						<div id="faq-{{ categories-loop.index }}-{{ questions-loop.index }}" class="accordion-collapse collapse{% if questions-loop.index == 1 %} show{% endif %}" role="tabpanel" data-bs-parent="#faq-{{ categories-loop.index }}">
 							<div class="accordion-body pt-0">
 								<div>