Complete refactor of collapsibles.

This is now a completely self-contained feature, which
can be used in the same way on every page. I've moved all the
collapsible-related logics out of the resources.js file and
into collapsibles.js, and added documentation and other
quality-of-life features that will apply to other pages, as well.

Changes:
- The icon will now always change when the collapsible opens or closes.
- By adding the "collapsed" class, you can tell the collapsible to
  be collapsed by default.

1 files changed, 56 insertions, 4 deletions

diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index 443d3f49..1df0b9fe 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -1,15 +1,67 @@
+/*
+A utility for creating simple collapsible cards.
+
+To see this in action, go to /resources or /pages/guides/pydis-guides/contributing/bot/
+
+// HOW TO USE THIS //
+First, import this file and the corresponding css file into your template.
+
+  <link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
+  <script defer src="{% static "js/collapsibles.js" %}"></script>
+
+Next, you'll need some HTML that these scripts can interact with.
+
+<div class="card">
+    <button type="button" class="card-header collapsible">
+        <span class="card-header-title subtitle is-6 my-2 ml-2">Your headline</span>
+        <span class="card-header-icon">
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
+        </span>
+    </button>
+    <div class="collapsible-content collapsed">
+        <div class="card-content">
+            You can put anything you want here. Lists, more divs, flexboxes, images, whatever.
+        </div>
+    </div>
+</div>
+
+That's it! Collapsing stuff should now work.
+ */
+
 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";
+        // Close any collapsibles that are marked as initially collapsed
+        if (container.classList.contains("collapsed")) {
+            container.style.maxHeight = "0px";
+        // Set maxHeight to the size of the container on all other containers.
+        } else {
+            container.style.maxHeight = container.scrollHeight + "px";
+        }
     }
 
+    // Listen for click events, and collapse or explode
     const headers = document.getElementsByClassName("collapsible");
     for (const header of headers) {
+        const content = header.nextElementSibling;
+        const icon = header.querySelector(".card-header-icon i");
+
+        // Any collapsibles that are not initially collapsed needs an icon switch.
+        if (!content.classList.contains("collapsed")) {
+            icon.classList.remove("fas", "fa-angle-down");
+            icon.classList.add("far", "fa-window-minimize");
+        }
+
         header.addEventListener("click", () => {
-            var content = header.nextElementSibling;
-            content.classList.toggle('collapsed');
+            if (content.style.maxHeight !== "0px"){
+                content.style.maxHeight = "0px";
+                icon.classList.remove("far", "fa-window-minimize");
+                icon.classList.add("fas", "fa-angle-down");
+            } else {
+                content.style.maxHeight = content.scrollHeight + "px";
+                icon.classList.remove("fas", "fa-angle-down");
+                icon.classList.add("far", "fa-window-minimize");
+            }
         });
     }
 });