https://www.pythondiscord.com/static/js/collapsibles.js

1/*
2A utility for creating simple collapsible cards.
3
4To see this in action, go to /resources or /pages/guides/pydis-guides/contributing/bot/
5
6// HOW TO USE THIS //
7First, import this file and the corresponding css file into your template.
8
9  <link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
10  <script defer src="{% static "js/collapsibles.js" %}"></script>
11
12Next, you'll need some HTML that these scripts can interact with.
13
14<div class="card">
15    <button type="button" class="card-header collapsible">
16        <span class="card-header-title subtitle is-6 my-2 ml-2">Your headline</span>
17        <span class="card-header-icon">
18            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
19        </span>
20    </button>
21    <div class="collapsible-content collapsed">
22        <div class="card-content">
23            You can put anything you want here. Lists, more divs, flexboxes, images, whatever.
24        </div>
25    </div>
26</div>
27
28That's it! Collapsing stuff should now work.
29 */
30
31document.addEventListener("DOMContentLoaded", () => {
32    const contentContainers = document.getElementsByClassName("collapsible-content");
33    for (const container of contentContainers) {
34        // Close any collapsibles that are marked as initially collapsed
35        if (container.classList.contains("collapsed")) {
36            container.style.maxHeight = "0px";
37        // Set maxHeight to the size of the container on all other containers.
38        } else {
39            container.style.maxHeight = container.scrollHeight + "px";
40        }
41    }
42
43    // Listen for click events, and collapse or explode
44    const headers = document.getElementsByClassName("collapsible");
45    for (const header of headers) {
46        const content = header.nextElementSibling;
47        const icon = header.querySelector(".card-header-icon i");
48
49        // Any collapsibles that are not initially collapsed needs an icon switch.
50        if (!content.classList.contains("collapsed")) {
51            icon.classList.remove("fas", "fa-angle-down");
52            icon.classList.add("far", "fa-window-minimize");
53        }
54
55        header.addEventListener("click", () => {
56            if (content.style.maxHeight !== "0px"){
57                content.style.maxHeight = "0px";
58                icon.classList.remove("far", "fa-window-minimize");
59                icon.classList.add("fas", "fa-angle-down");
60            } else {
61                content.style.maxHeight = content.scrollHeight + "px";
62                icon.classList.remove("fas", "fa-angle-down");
63                icon.classList.add("far", "fa-window-minimize");
64            }
65        });
66    }
67});