diff options
Diffstat (limited to 'pydis_site/static/js/collapsibles.js')
-rw-r--r-- | pydis_site/static/js/collapsibles.js | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js new file mode 100644 index 00000000..1df0b9fe --- /dev/null +++ b/pydis_site/static/js/collapsibles.js @@ -0,0 +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", () => { + const contentContainers = document.getElementsByClassName("collapsible-content"); + for (const container of contentContainers) { + // 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", () => { + 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"); + } + }); + } +}); |