Change cards to accordion in bootstrap 5

src/_includes/partials/professionalExperience.html

@@ -25,31 +25,23 @@
   </div>
   {% if collections.professionalExperienceProjects.length > 0 %}
   <div class="col-md-6">
-      <div id="{{ profExp.data.id }}">
+    <div class="accordion accordion-flush" id="{{ profExp.data.id }}">
-          {% for project in (collections.professionalExperienceProjects | findProjectAssociatedWithExperience(profExp.data.id)) %}
+      {% for project in (collections.professionalExperienceProjects | findProjectAssociatedWithExperience(profExp.data.id)) %}
-          {% set projectSlug = (profExp.data.id + '-' + project.data.name | slugify) %}
+      {% set projectSlug = (profExp.data.id + '-' + project.data.name | slugify) %}
-          <div class="card section-bg">
+      <div class="accordion-item">
-              <div class="card-header">
+        <div class="accordion-header"">
-                  <a
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ projectSlug }}">
-                      class="card-link"
+            <b>{{ project.data.name }}</b>
-                      data-toggle="collapse"
+          </button>
-                      href="#{{ projectSlug }}"
+        </div>
-                  >
+        <div id="{{ projectSlug }}" class="accordion-collapse collapse" data-bs-parent="#{{ profExp.data.id }}">
-                      <b>{{ project.data.name }}</b>
+          <div class="accordion-body">
-                  </a>
+            {{ project.content | safe }}
-              </div>
-              <div
-                  id="{{ projectSlug }}"
-                  class="collapse"
-                  data-parent="#{{ profExp.data.id }}"
-              >
-                  <div class="card-body">
-                      {{ project.content | safe }}
-                  </div>
-              </div>
           </div>
-          {% endfor %}
+        </div>
       </div>
+      {% endfor %}
+    </div>
   </div>
   {% endif %}
 </div>

src/style.css

@@ -163,16 +163,25 @@ hr {
   display: block;
 }
 
-.card {
+.accordion {
   background-color: var(--background-color);
+  --bs-accordion-border-color: var(--background-color);
+  --bs-accordion-active-color: var(--primary-color);
 }
 
-.card-header {
+.accordion-button {
   background-color: var(--secondary-color);
+  color: var(--primary-color)
 }
 
-.card-body {
+.accordion-button:not(.collapsed) {
+  background-color: var(--primary-color);
+  color: var(--secondary-color)
+}
+
+.accordion-body {
   background-color: var(--quaternary-color);
+  color: var(--font-color)
 }
 
 .dropdown-menu {