diff --git a/css/cards.css b/css/cards.css
index e959d9a..2e5dfd8 100644
--- a/css/cards.css
+++ b/css/cards.css
@@ -100,7 +100,7 @@ span.card-basic {
   background-color: rgba(255, 255, 255, 0.0512);
 }
 
-.expander-top.active {
+.expander-top[aria-expanded="true"] {
   background-color: rgba(255, 255, 255, 0.0612);
 }
 
@@ -119,16 +119,23 @@ span.card-basic {
 
 .expander-bottom {
   background-color: rgba(255, 255, 255, 0.0512);
-  display: none;
-  animation: slide-up 0.4s;
-  z-index: 0;
-  position: relative;
-  overflow-y: hidden;
   margin-top: 0 !important;
+  max-height: 0;
+  opacity: 0;
+  overflow-y: hidden;
+  transition: max-height 300ms ease, opacity 300ms ease;
+}
+
+.expander-top[aria-expanded="true"] ~ .expander-bottom {
+  opacity: 1;
+}
+
+.expander-top[aria-expanded="true"] .chevron {
+  transform: rotate(180deg)!important;
 }
 
-.expander-opened {
-  animation: slide-down 2s;
+.chevron {
+  transition: transform 300ms ease;
 }
 
 /* Chevron icon */
diff --git a/js/javascript.js b/js/javascript.js
index eaa5256..e78e14c 100644
--- a/js/javascript.js
+++ b/js/javascript.js
@@ -45,9 +45,9 @@ function fadeOut(element) {
     element.style.opacity = "0%";
 }
 
-function rotate(element, rotation = 180) {
-    element.style.transform = 'rotatex(' + rotation + 'deg)';
-}
+// function rotate(element, rotation = 180) {
+//     element.style.transform = 'rotatex(' + rotation + 'deg)';
+// }
 
 function setupExpanders() {
     const expanders = document.querySelectorAll('.expander-top');
@@ -77,26 +77,20 @@ function setupExpanders() {
     });
 }
 
-function expandCard(thisObj, $open, $dontReset) {
-    const chevron = thisObj.getElementsByClassName("chevron")[0]
-    if ($open.classList.contains('expander-opened') && !$dontReset) {
-        rotate(chevron, 0)
-        $open.classList.remove('expander-opened');
-        setTimeout(() => $open.style.display = "none", 400);
-        thisObj.classList.remove('active');
+function expandCard(thisObj, $open) {
+    if (thisObj.getAttribute('aria-expanded')) {
+        thisObj.removeAttribute('aria-expanded');
+        $open.style.maxHeight = 0;
     }
     else {
-        $open.classList.add('expander-opened');
-        rotate(chevron, 180);
-        $open.style.display = "block";
-        thisObj.classList.add('active');
-
-        const textareas = $open.querySelectorAll('.auto-resize');
-        if (textareas) {
-            for (var i = 0; i < textareas.length; i++) {
-                autoResize(textareas[i]);
-            }
-        }
+        thisObj.setAttribute('aria-expanded', 'true');
+        $open.style.maxHeight = $open.scrollHeight + 'px';
+        // const textareas = $open.querySelectorAll('.auto-resize');
+        // if (textareas) {
+        //     for (var i = 0; i < textareas.length; i++) {
+        //         autoResize(textareas[i]);
+        //     }
+        // }
     }
 }