Add show more/less toggle

css/main.scss

@@ -39,8 +39,24 @@ form {
 
 .all_tags{
     padding-top: 10px;
-    line-height: 1.5;
+    line-height: 28px;
     text-align: center;
+    overflow: scroll;
+
+    &.short_view {
+        max-height: 125px;        
+    }
+}
+
+.centered {
+    padding-top: 10px;
+    text-align: center;
+    width: 100%;
+}
+
+button.show_more_toggle {
+    color: blue;
+
 }
 
 input[type="text"] {

index.html

@@ -24,7 +24,7 @@ <h1 class="main_head">
 </td></table>
 </div>
 
-<div class="all_tags">
+<div id="all_tags" class="all_tags short_view">
   All tags:
   <br>
 {% capture tags_content %}{% include_relative metadata/all-tags.txt %}{% endcapture %}
@@ -37,6 +37,9 @@ <h1 class="main_head">
 {% endif %}
 {% endfor %}
 </div>
+<div class="centered">
+  <button id="show_more_toggle" class="show_more_toggle">↓ Show more ↓</button>
+</div>
 
 
 <table>

js/search.js

@@ -171,13 +171,30 @@ function SETUP() {
     document.getElementById('search-box').focus();
   }
 
+  function attachShowMoreListener() {
+    const button = document.getElementById("show_more_toggle")
+    const all_tags = document.getElementById("all_tags")
+    button.onclick = (e) => {
+      e.preventDefault();
+      const is_short_view = all_tags.classList.contains("short_view")
+      if (is_short_view) {
+        all_tags.classList.remove("short_view")
+        button.textContent = "↑ Show less ↑"
+      } else {
+        all_tags.classList.add("short_view")
+        button.textContent = "↓ Show more ↓"
+      }
+    }
+  }
+
   return Promise.all([
     setInitialQuery(),
     buildShadow(),
     getDataAndFuse(),
     getTags(),
     focusSearchBox(),
     attachSearchCallback(),
+    attachShowMoreListener()
   ]);
 }