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.

4 files changed, 67 insertions, 32 deletions

diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
index ed9e3db3..2aa10aa3 100644
--- a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
+++ b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
@@ -14,10 +14,10 @@ First things first, to run the bot's code and make changes to it, you need a loc
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Getting started with Git and GitHub</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
               <p>If you don't have Git on your computer already, <a href="https://git-scm.com/downloads">install it</a>. You can additionally install a Git GUI such as <a href="https://www.gitkraken.com/download">GitKraken</a>, or the <a href="https://cli.github.com/manual/installation">GitHub CLI</a>.</p>
               <p>To learn more about Git, you can look into <a href="../working-with-git">our guides</a>, as well as <a href="https://education.github.com/git-cheat-sheet-education.pdf">this cheatsheet</a>, <a href="https://learngitbranching.js.org">Learn Git Branching</a>, and otherwise any guide you can find on the internet. Once you got the basic idea though, the best way to learn Git is to use it.</p>
@@ -78,10 +78,10 @@ See [here](../obtaining-discord-ids) for help with obtaining Discord IDs.
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Optional config.yml</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
               <p>If you used the provided server template, and you're not sure which channels belong where in the config file, you can use the config below. Pay attention to the comments with several <code>#</code> symbols, and replace the <code>�</code> characters with the right IDs.</p>
               <pre>
@@ -458,10 +458,10 @@ We understand this is tedious and are working on a better solution for setting u
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Why do you need a separate config file?</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             While it's technically possible to edit <code>config-default.yml</code> to match your server, it is heavily discouraged.
             This file's purpose is to provide the configurations the Python bot needs to run in the Python server in production, and should remain as such.
@@ -487,10 +487,10 @@ You are now almost ready to run the Python bot. The simplest way to do so is wit
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Getting started with Docker</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             The requirements for Docker are:
             <ul>
@@ -541,10 +541,10 @@ With at least the site running in Docker already (see the previous section on ho
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Ways to run code</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             Notice that the bot is started as a module. There are several ways to do so:
             <ul>
diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index a722d646..1d73fa00 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -7,9 +7,5 @@
 
 .collapsible-content {
   transition: max-height 0.3s ease-out;
-}
-
-.collapsible-content.collapsed {
   overflow: hidden;
-  max-height: 0 !important;
 }
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");
+            }
         });
     }
 });
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 00bc6ad8..e45233b3 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -217,20 +217,7 @@ document.addEventListener("DOMContentLoaded", function () {
     deserializeURLParams();
     updateUI();
 
-    // If you collapse or uncollapse a filter group, swap the icon.
-    $('button.collapsible').on("click", function() {
-        let icon = $(this).find(".card-header-icon i");
-
-        if ($(icon).hasClass("fa-window-minimize")) {
-            $(icon).removeClass(["far", "fa-window-minimize"]);
-            $(icon).addClass(["fas", "fa-angle-down"]);
-        } else {
-            $(icon).removeClass(["fas", "fa-angle-down"]);
-            $(icon).addClass(["far", "fa-window-minimize"]);
-        }
-    });
-
-    // If this is a mobile device, collapse the categories to win back some screen real estate.
+    // If this is a mobile device, collapse all the categories to win back some screen real estate.
     if (screen.width < 480) {
         let categoryHeaders = $(".filter-category-header .collapsible-content");
         let icons = $('.filter-category-header button .card-header-icon i');