3 files changed, 26 insertions, 0 deletions
diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css
index d831f86d..2d4bd325 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -77,3 +77,16 @@ ul.menu-list.toc {
 li img {
     margin-top: 0.5em;
 }
+
+.collapsible {
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  outline: none;
+}
+
+.collapsible-content {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.2s ease-out;
+}
diff --git a/pydis_site/static/images/content/contributing/pycharm_run_module.png b/pydis_site/static/images/content/contributing/pycharm_run_module.png
new file mode 100644
index 00000000..c5030519
--- /dev/null
+++ b/pydis_site/static/images/content/contributing/pycharm_run_module.png
diff --git a/pydis_site/static/js/content/page.js b/pydis_site/static/js/content/page.js
new file mode 100644
index 00000000..366a033c
--- /dev/null
+++ b/pydis_site/static/js/content/page.js
@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const headers = document.getElementsByClassName("collapsible");
+    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";
+            }
+        });
+    }
+});