hugo-theme-terminal

commit 502f1cb9369fb0ed677522fc48711e4f9954d729
parent 000804d7285b817eb4ac50baa3150930bbc14dae
Author: lou woell <lou@repetitions.de>
Date:   Sun, 26 Apr 2026 19:23:54 +0200

tabbed container based on classes instead of editing display prop

Diffstat:
M
assets/css/tabbedContainer.css
 | 
7
++++++-
M
assets/js/tabbedContainer.js
 | 
18
+++++++++---------
M
layouts/_shortcodes/tabbed.html
 | 
8
+++++---

3 files changed, 20 insertions(+), 13 deletions(-)
diff --git a/assets/css/tabbedContainer.css b/assets/css/tabbedContainer.css
@@ -4,8 +4,13 @@
         margin-top: 0.25em;
         padding-top: 0.25em;
 
-        > div:not(:first-child) {
+        > .tabContent {
+
             display: none;
+
+            &.active {
+                display: block;
+            }
         }
     }
 
diff --git a/assets/js/tabbedContainer.js b/assets/js/tabbedContainer.js
@@ -1,18 +1,18 @@
 function clickTab (evt) {
 
-    let tabName = evt.target.getAttribute("tabName");
-    let container = evt.currentTarget.parentElement;
-    let tabContent = container.getElementsByClassName("tabContent");
-    let tabBar = evt.currentTarget.children;
+    const tabName = evt.target.getAttribute("tabName");
+    const container = evt.currentTarget.parentElement;
+    const tabContent = container.getElementsByClassName("tabContent");
+    const tabLink = container.getElementsByClassName("tabLink");
 
-    for (let i = 0; i < tabContent.length; i++){
-	tabContent[i].style.display = "none";
+    for (let element of tabContent){
+        element.classList.remove("active");
     }
 
-    for (let i = 0; i < tabBar.length; i++){
-	tabBar[i].classList.remove("active")
+    for (let element of tabLink){
+        element.classList.remove("active");
     }
 
-    tabContent.namedItem(tabName).style.display = "block";
+    tabContent.namedItem(tabName).classList.add("active");
     evt.target.classList.add("active");
 }
diff --git a/layouts/_shortcodes/tabbed.html b/layouts/_shortcodes/tabbed.html
@@ -3,13 +3,15 @@
   <div class="tabBar" onclick="javascript:clickTab(event);">
     {{ range $idx, $tab := .Scratch.Get "tabs" -}}
       <button tabName="{{ .name }}"
-	      class="tabLink {{ cond (eq $idx 0) "active" ""}}">
-        {{- .name }}</button>
+              class="tabLink {{ cond (eq $idx 0) "active" ""}}">
+        {{- .name }}
+      </button>
     {{- end }}
   </div>
   <div class="tabs">
     {{ range $idx, $tab := .Scratch.Get "tabs" -}}
-      <div class="tabContent" id="{{ .name }}">
+      <div class="tabContent {{- cond (eq $idx 0) " active" "" -}}"
+           id="{{ .name }}">
         {{ .content }}
       </div>
     {{- end }}