Change cards to accordion in bootstrap 5

src/_includes/partials/professionalExperience.html

@@ -25,25 +25,17 @@
   </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)) %}
       {% set projectSlug = (profExp.data.id + '-' + project.data.name | slugify) %}
-          <div class="card section-bg">
-              <div class="card-header">
-                  <a
-                      class="card-link"
-                      data-toggle="collapse"
-                      href="#{{ projectSlug }}"
-                  >
+      <div class="accordion-item">
+        <div class="accordion-header"">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ projectSlug }}">
             <b>{{ project.data.name }}</b>
-                  </a>
+          </button>
         </div>
-              <div
-                  id="{{ projectSlug }}"
-                  class="collapse"
-                  data-parent="#{{ profExp.data.id }}"
-              >
-                  <div class="card-body">
+        <div id="{{ projectSlug }}" class="accordion-collapse collapse" data-bs-parent="#{{ profExp.data.id }}">
+          <div class="accordion-body">
             {{ project.content | safe }}
           </div>
         </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 {