FEATURE Bootstrap 5 accordion template (#45)

dynamic · Oct 23, 2023 · 2d94e64 · 2d94e64
1 parent 069fbfe
commit 2d94e64
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/templates/Dynamic/Elements/Accordion/Elements/ElementAccordion.ss b/templates/Dynamic/Elements/Accordion/Elements/ElementAccordion.ss
@@ -2,25 +2,29 @@
 <% if $Content %><div class="element__content">$Content</div><% end_if %>
 
 <% if $Panels %>
-    <div id="accordion-{$ID}" class="element__accordion__list">
+    <div id="accordion-{$ID}" class="accordion element__accordion__list">
         <% loop $Panels %>
-            <div class="card">
-                <div class="card-header" id="accordion-{$Up.ID}-heading-{$Pos}">
-                    <h3 class="mb-0">
-                        <button class="btn btn-link btn-lg btn-block<% if not $First %> collapsed<% end_if %>" data-toggle="collapse" data-target="#accordion-{$Up.ID}-collapse-{$Pos}" aria-expanded="<% if $First %>true<% else %>false<% end_if %>" aria-controls="accordion-{$Up.ID}-collapse-{$Pos}">
-                            $Title
-                        </button>
-                    </h3>
-                </div>
-                <div id="accordion-{$Up.ID}-collapse-{$Pos}" class="collapse<% if $First %> show<% end_if %>" aria-labelledby="accordion-{$Up.ID}-heading-{$Pos}" data-parent="#accordion-{$Up.ID}">
-                    <% if $Image %>
-                        <div class="col-md-5 img-side">
-                            <img src="$Image.URL" class="img-fluid" alt="$Image.Title.ATT">
+            <div class="accordion-item">
+                <h2 class="accordion-header">
+                <button class="accordion-button<% if not $IsFirst %> collapsed<% end_if %>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{$ID}" aria-expanded="<% if $IsFirst %>true<% else %>false<%end_if %>" aria-controls="collapse-{$ID}">
+                        $Title
+                    </button>
+                </h2>
+                <div id="collapse-{$ID}" class="accordion-collapse collapse<% if $IsFirst %> show<% end_if %>" data-bs-parent="#accordion-{$Up.ID}">
+                    <div class="accordion-body">
+                        <div class="row">
+                            <% if $Image %>
+                                <div class="col-md-5 img-side">
+                                    <img src="$Image.Fill(520,420).URL" class="img-fluid" alt="$Image.Title.ATT">
+                                </div>
+                                <div class="col-md-7">
+                            <% else %>
+                                <div class="col-md-12">
+                            <% end_if %>
+                                    $Content
+                                    <% if $ElementLink %>$ElementLink<% end_if %>
+                                </div>
                         </div>
-                    <% end_if %>
-                    <div class="card-body">
-                        $Content
-                        <% if $ElementLink %>$ElementLink<% end_if %>
                     </div>
                 </div>
             </div>