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

Author: lemonsaurus

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;
 }

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');
         });
     }
 });

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.

pydis_site/templates/resources/resources.html

@@ -116,9 +116,9 @@
 
                             {# Checkboxes #}
                             {% if filter_data.hidden %}
-                                <div class="collapsible-content">
+                                <div class="collapsible-content collapsed">
                             {% else %}
-                                <div class="collapsible-content" style="max-height: fit-content;">
+                                <div class="collapsible-content">
                             {% endif %}
                                     <div class="card-content">
                                         {% for filter_item in filter_data.filters %}