Fix bug where transition wouldn't work on first collapse.

3 files changed, 10 insertions, 9 deletions

diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index 8fdd1f12..d35e77ea 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -6,7 +6,11 @@
 }
 
 .collapsible-content {
+  max-height: 40em;
+  transition: max-height 0.3s ease-out;
+}
+
+.collapsible-content.collapsed {
   overflow: hidden;
   max-height: 0;
-  transition: max-height 0.2s ease-out;
 }
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index 366a033c..d12d9f86 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -3,11 +3,7 @@ document.addEventListener("DOMContentLoaded", () => {
     for (const header of headers) {
         header.addEventListener("click", () => {
             var content = header.nextElementSibling;
-            if (content.style.maxHeight){
-              content.style.maxHeight = null;
-            } else {
-              content.style.maxHeight = content.scrollHeight + "px";
-            }
+            content.classList.toggle('collapsed');
         });
     }
 });
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index bffb5e91..00bc6ad8 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -234,11 +234,12 @@ document.addEventListener("DOMContentLoaded", function () {
     if (screen.width < 480) {
         let categoryHeaders = $(".filter-category-header .collapsible-content");
         let icons = $('.filter-category-header button .card-header-icon i');
-        categoryHeaders.addClass("no-transition");
-        categoryHeaders.css("max-height", "");
+        categoryHeaders.addClass("no-transition collapsed");
         icons.removeClass(["far", "fa-window-minimize"]);
         icons.addClass(["fas", "fa-angle-down"]);
-        categoryHeaders.removeClass("no-transition");
+
+        // Wait 10ms before removing this class, or else the transition will animate due to a race condition.
+        setTimeout(() => { categoryHeaders.removeClass("no-transition"); }, 10);
     }
 
     // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.