js: Support Bulma's tabs

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/static/js/site.js b/src/static/js/site.js
index 24ef831bc8dfb58ddde43e6636ccc4aa701960b8..5c645b716dbc648d8c9a784e4afc14316c901255 100644 (file)
--- a/src/static/js/site.js
+++ b/src/static/js/site.js
@@ -93,3 +93,24 @@ document.addEventListener("DOMContentLoaded", () => {
                }
        });
 });
+
+// Tabs
+document.querySelectorAll(".tabs li").forEach(tab => {
+       tab.addEventListener("click", () => {
+               // Remove is-active from all tabs
+               document.querySelectorAll(".tabs li").forEach(
+                       t => t.classList.remove("is-active")
+               );
+
+               // Hide all tab content
+               document.querySelectorAll(".tab-content").forEach(
+                       c => c.classList.add("is-hidden")
+               );
+
+               // Activate the clicked tab
+               tab.classList.add('is-active')
+
+               // Show the content
+               document.getElementById(tab.dataset.tab).classList.remove("is-hidden");
+       });
+});