commiting

all_paw_care/templates/pages/faq.html

@@ -9,28 +9,25 @@
         </h1>
     </div>
 
+    <div class="d-grid gap-3 btn-group-vertical" role="group" id="faq-group">
     {% for faq in page.get_content() %}
-        <div class="row">
-            <div class="col-1">
-            </div>
+        <button class="btn btn-secondary text-light text-center"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#{{ page.get_content()[faq]['tag'] }}"
+                aria-expanded="true"
+                aria-controls="{{ page.get_content()[faq]['tag'] }}">
+            <h2 class="accordion-header">
+                {{ faq }}
+            </h2>
+        </button>
 
-            <a class="btn btn-primary text-center" data-bs-toggle="collapse"
-                   href="#{{ page.get_content()[faq]['tag'] }}" role="button" aria-expanded="false"
-                    aria-controls="{{ page.get_content()[faq]['tag'] }}">
-                <h2>{{ faq }}</h2>
-            </a>
-
-            <div class="collapse" id="{{ page.get_content()[faq]['tag'] }}">
-                <div class="card card-body text-center">
-                    {{ page.get_content()[faq]['answer'] }}
-                </div>
-            </div>
-
-            <div class="col-1">
+        <div class="collapse" id="{{ page.get_content()[faq]['tag'] }}">
+            <div class="card card-body text-center text-secondary">
+                {{ page.get_content()[faq]['answer']|safe }}
             </div>
         </div>
-
-        <hr class="invisible">
     {% endfor %}
+    </div>
 {% endblock %}