Add collapsible

layouts/shortcodes/collapsible.html

@@ -0,0 +1,4 @@
+<button type="button" class="collapsible">{{ index .Params 0 }}</button>
+<div class="content">
+  <p>{{ .Inner }}</p>
+</div> 

static/css/custom.css

@@ -53,3 +53,32 @@
     color: white;
 }
 
+
+/** Collapsible **/
+
+ /* Style the button that is used to open and close the collapsible content */
+.collapsible {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active, .collapsible:hover {
+  background-color: #ccc;
+}
+
+/* Style the collapsible content. Note: hidden by default */
+.content {
+  padding: 0 18px;
+  display: none;
+  overflow: hidden;
+  background-color: #f1f1f1;
+} 
+

static/js/main.js

@@ -1,26 +1,40 @@
 document.addEventListener("DOMContentLoaded", function() {
   setDarkMode()
+
+  var coll = document.getElementsByClassName("collapsible")
+
+  for (let i = 0; i < coll.length; i++) {
+    coll[i].addEventListener("click", function() {
+      this.classList.toggle("active")
+      var content = this.nextElementSibling
+      if (content.style.display === "block") {
+        content.style.display = "none"
+      } else {
+        content.style.display = "block"
+      }
+    })
+  }
 })
 
 
 function setCookie(cname, cvalue, exdays) {
-  document.cookie = cname + "=" + cvalue + ";path=/";
+  document.cookie = cname + "=" + cvalue + ";path=/"
 }
 
 function getCookie(cname) {
-  let name = cname + "=";
-  let decodedCookie = decodeURIComponent(document.cookie);
-  let ca = decodedCookie.split(';');
+  let name = cname + "="
+  let decodedCookie = decodeURIComponent(document.cookie)
+  let ca = decodedCookie.split(';')
   for(let i = 0; i <ca.length; i++) {
-    let c = ca[i];
+    let c = ca[i]
     while (c.charAt(0) == ' ') {
-      c = c.substring(1);
+      c = c.substring(1)
     }
     if (c.indexOf(name) == 0) {
-      return c.substring(name.length, c.length);
+      return c.substring(name.length, c.length)
     }
   }
-  return "";
+  return ""
 }
 
 function isStringTrue(val) {
@@ -28,17 +42,17 @@ function isStringTrue(val) {
 }
 
 function toggleDarkMode() {
-  let darkMode = getCookie("setDarkMode");
+  let darkMode = getCookie("setDarkMode")
   if(isStringTrue(darkMode))
-    setCookie("setDarkMode", false);
+    setCookie("setDarkMode", false)
   else
-    setCookie("setDarkMode", true);
-    document.body.classList.toggle("dark-mode");
+    setCookie("setDarkMode", true)
+    document.body.classList.toggle("dark-mode")
 }
 
 
 function setDarkMode() {
-  let darkMode = getCookie("setDarkMode");
+  let darkMode = getCookie("setDarkMode")
   if(isStringTrue(darkMode))
-    document.body.classList.toggle("dark-mode");
+    document.body.classList.toggle("dark-mode")
 }