Fix delay when collapsing collapsibles.

2 files changed, 7 insertions, 2 deletions

diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index d35e77ea..a722d646 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -6,11 +6,10 @@
 }
 
 .collapsible-content {
-  max-height: 40em;
   transition: max-height 0.3s ease-out;
 }
 
 .collapsible-content.collapsed {
   overflow: hidden;
-  max-height: 0;
+  max-height: 0 !important;
 }
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index d12d9f86..443d3f49 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -1,4 +1,10 @@
 document.addEventListener("DOMContentLoaded", () => {
+    // Set maxHeight to scroll height on all matching collapsibles
+    const contentContainers = document.getElementsByClassName("collapsible-content");
+    for (const container of contentContainers) {
+        container.style.maxHeight = container.scrollHeight + "px";
+    }
+
     const headers = document.getElementsByClassName("collapsible");
     for (const header of headers) {
         header.addEventListener("click", () => {