add accordion support

data/static/style.css

@@ -634,3 +634,48 @@ ul, ol {
   max-width: 15px;
   max-height: 15px;
 }
+
+.accordion {
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  margin: 10px 5px;
+  overflow: hidden;
+}
+
+.accordion.hidden {
+  border-bottom: none;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  background-color: rgb(159.0271653543, 162.0727712915, 172.9728346457);
+  padding: 0 10px;
+  gap: 10px;
+  border-bottom: 1px solid black;
+}
+
+.accordion-toggle {
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.accordion-title {
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accordion-content {
+  padding: 0 15px;
+}
+
+.accordion-content.hidden {
+  display: none;
+}

js/ui.js

@@ -22,9 +22,27 @@ function activateSelfDeactivateSibs(button) {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+  // tabs
   document.querySelectorAll(".tab-button").forEach(button => {
     button.addEventListener("click", () => {
       activateSelfDeactivateSibs(button);
     });
   });
+  
+  // accordions
+  const accordions = document.querySelectorAll(".accordion");
+  accordions.forEach(accordion => {
+    const header = accordion.querySelector(".accordion-header");
+    const toggleButton = header.querySelector(".accordion-toggle");
+    const content = accordion.querySelector(".accordion-content");
+    
+    const toggle = (e) => {
+      e.stopPropagation();
+      accordion.classList.toggle("hidden");
+      content.classList.toggle("hidden");
+      toggleButton.textContent = content.classList.contains("hidden") ? "►" : "▼"
+    }
+    
+    toggleButton.addEventListener("click", toggle);
+  });
 });

sass/style.scss

@@ -46,6 +46,7 @@ $lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
 $main_bg: color.scale($accent_color, $lightness: -10%, $saturation: -40%);
 $button_color: color.adjust($accent_color, $hue: 90);
 $button_color2: color.adjust($accent_color, $hue: 180);
+$accordion_color: color.adjust($accent_color, $hue: 140, $lightness: -10%, $saturation: -15%);
 
 %button-base {
   cursor: default;
@@ -643,3 +644,48 @@ ul, ol {
   max-width: 15px;
   max-height: 15px;
 }
+
+.accordion {
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  margin: 10px 5px;
+  overflow: hidden;
+}
+
+.accordion.hidden {
+  border-bottom: none;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  background-color: $accordion_color;
+  padding: 0 10px;
+  gap: 10px;
+  border-bottom: 1px solid black;
+}
+
+.accordion-toggle {
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.accordion-title {
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accordion-content {
+  padding: 0 15px;
+}
+
+.accordion-content.hidden {
+  display: none;
+}

views/base.etlua

@@ -18,6 +18,6 @@
   </footer>
   <script src="/static/js/copy-code.js"></script>
   <script src="/static/js/date-fmt.js"></script>
-  <script src="/static/js/tabs.js"></script>
+  <script src="/static/js/ui.js"></script>
 </body>
 </html>