collapsible api keys

layouts/main.moon

@@ -19,6 +19,9 @@ class extends Widget
         link rel: "stylesheet", href: "https://cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css"
         -- JQuery
         script src: "https://code.jquery.com/jquery-3.3.1.min.js", integrity: "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=", crossorigin: "anonymous"
+        -- custom JS/CSS
+        script src: "/static/main.js"
+        link rel: "stylesheet", href: "/static/main.css"
       body ->
         div class: "container", ->
           @content_for "inner"

static/main.css

@@ -0,0 +1,19 @@
+.collapsible {
+  cursor: pointer;
+  width: 100%;
+  /*border: none;*/
+  /*text-align: left;*/
+  /*outline: none;*/
+  /*font-size: 15px;*/
+}
+
+/*.active, .collapsible:hover {
+  background-color: #ccc;
+}*/
+
+.content {
+  /*padding: 0 18px;*/
+  display: none;
+  overflow: hidden;
+  /*background-color: #f1f1f1;*/
+}

static/main.js

@@ -0,0 +1,15 @@
+$(document).ready(function() {
+  let c = document.getElementsByClassName("collapsible");
+
+  for (let i = 0; i < c.length; i++) {
+    c[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";
+      }
+    });
+  }
+});

views/index/logged_in.moon

@@ -5,13 +5,14 @@ class LoggedIn extends Widget
     script -> raw "var API_KEY = '#{@keys[1].key}';"
     script src: "/static/index.js"
 
-    p "API Keys:"
-    ul ->
-      if @keys
-        for key in *@keys
-          li key.key
-      li id: "new-api-key", ->
-        button onclick: "new_api_key()", "+"
+    button class: "collapsible", "API Keys"
+    div class: "content", ->
+      ul ->
+        if @keys
+          for key in *@keys
+            li key.key
+        li id: "new-api-key", ->
+          button onclick: "new_api_key()", "New API Key"
 
     p "Tasks:"
     ul ->