From 914636e5fec10508396c2e2d0b8edc2782a0135a Mon Sep 17 00:00:00 2001
From: Sravan Balaji <balajsra@umich.edu>
Date: Thu, 2 Jan 2025 11:29:09 -0500
Subject: [PATCH] Change cards to accordion in bootstrap 5

---
 .../partials/professionalExperience.html      | 38 ++++++++-----------
 src/style.css                                 | 15 ++++++--
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/_includes/partials/professionalExperience.html b/src/_includes/partials/professionalExperience.html
index f6b0aa1..1394607 100644
--- a/src/_includes/partials/professionalExperience.html
+++ b/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 }}">
-          {% 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 }}"
-                  >
-                      <b>{{ project.data.name }}</b>
-                  </a>
-              </div>
-              <div
-                  id="{{ projectSlug }}"
-                  class="collapse"
-                  data-parent="#{{ profExp.data.id }}"
-              >
-                  <div class="card-body">
-                      {{ project.content | safe }}
-                  </div>
-              </div>
+    <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="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>
+          </button>
+        </div>
+        <div id="{{ projectSlug }}" class="accordion-collapse collapse" data-bs-parent="#{{ profExp.data.id }}">
+          <div class="accordion-body">
+            {{ project.content | safe }}
           </div>
-          {% endfor %}
+        </div>
       </div>
+      {% endfor %}
+    </div>
   </div>
   {% endif %}
 </div>
diff --git a/src/style.css b/src/style.css
index cc18f20..a795502 100644
--- a/src/style.css
+++ b/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 {