Fixed accordion

crispy_bootstrap5/templates/bootstrap5/accordion-group.html

@@ -1,17 +1,15 @@
-<div class="card mb-2">
-    <div class="card-header" role="tab">
-        <h5 class="mb-0">
-            <a data-toggle="collapse" href="#{{ div.css_id }}" aria-expanded="true"
-               aria-controls="{{ div.css_id }}">
-                {{ div.name }}
-            </a>
-        </h5>
-    </div>
+<div class="accordion-item">
+    <h2 class="accordion-header">
+        <button class="accordion-button{% if not div.active %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ div.css_id }}" aria-expanded="true"
+            aria-controls="{{ div.css_id }}">
+            {{ div.name }}
+        </button>
+    </h2>
 
-    <div id="{{ div.css_id }}" class="collapse{% if div.active %} show{% endif %}" role="tabpanel"
-         aria-labelledby="{{ div.css_id }}" data-parent="#accordion">
-        <div class="card-body">
+    <div id="{{ div.css_id }}" class="accordion-collapse collapse{% if div.active %} show{% endif %}"
+         aria-labelledby="{{ div.css_id }}" data-bs-parent="#accordion">
+        <div class="accordion-body">
             {{ fields|safe }}
         </div>
-    </div>
+    </div>  
 </div>

crispy_bootstrap5/templates/bootstrap5/accordion.html

@@ -1,3 +1,3 @@
-<div id="accordion" role="tablist">
+<div class="accordion" id="accordion">
     {{ content|safe }}
 </div>

tests/results/accordion.html

@@ -0,0 +1,53 @@
+<div class="accordion" id="accordion">
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#one"
+        aria-expanded="true" aria-controls="one">
+        one
+      </button>
+    </h2>
+    <div id="one" class="accordion-collapse collapse show" aria-labelledby="one" data-bs-parent="#accordion">
+      <div class="accordion-body">
+        <div id="div_id_first_name" class="mb-3">
+          <label for="id_first_name" class="form-label requiredField">
+            first name<span class="asteriskField">*</span>
+          </label>
+          <div>
+            <input type="text" name="first_name" maxlength="5" class="textinput textInput inputtext form-control"
+              required id="id_first_name" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#two"
+        aria-expanded="true" aria-controls="two">
+        two
+      </button>
+    </h2>
+    <div id="two" class="accordion-collapse collapse" aria-labelledby="two" data-bs-parent="#accordion">
+      <div class="accordion-body">
+        <div id="div_id_password1" class="mb-3">
+          <label for="id_password1" class="form-label requiredField">
+            password<span class="asteriskField">*</span>
+          </label>
+          <div>
+            <input type="password" name="password1" maxlength="30" class="textinput textInput form-control" required
+              id="id_password1" />
+          </div>
+        </div>
+        <div id="div_id_password2" class="mb-3">
+          <label for="id_password2" class="form-label requiredField">
+            re-enter password<span class="asteriskField">*</span>
+          </label>
+          <div>
+            <input type="password" name="password2" maxlength="30" class="textinput textInput form-control" required
+              id="id_password2" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

tests/test_layout_objects.py

@@ -227,25 +227,16 @@ def test_inline_radios(self, settings):
         assert html.count('form-check-inline"') == 2
 
     def test_accordion_and_accordiongroup(self, settings):
-        test_form = SampleForm()
-        test_form.helper = FormHelper()
-        test_form.helper.layout = Layout(
+        form = SampleForm()
+        form.helper = FormHelper()
+        form.helper.form_tag = False
+        form.helper.layout = Layout(
             Accordion(
                 AccordionGroup("one", "first_name"),
                 AccordionGroup("two", "password1", "password2"),
             )
         )
-        html = render_crispy_form(test_form)
-
-        assert html.count('<div id="accordion"') == 1
-        assert html.count('<div class="card mb-2"') == 2
-        assert html.count('<div class="card-header"') == 2
-
-        assert html.count('<div id="one"') == 1
-        assert html.count('<div id="two"') == 1
-        assert html.count('name="first_name"') == 1
-        assert html.count('name="password1"') == 1
-        assert html.count('name="password2"') == 1
+        assert parse_form(form) == parse_expected("accordion.html")
 
     def test_accordion_active_false_not_rendered(self, settings):
         test_form = SampleForm()