From 2dfbc312e6ccb88f838170d8e777d48aacde2ff5 Mon Sep 17 00:00:00 2001 From: johannst Date: Sun, 13 Nov 2022 14:13:35 +0000 Subject: deploy: 026d679006e5d470bacdc74bb3082072edf31e36 --- web/html.html | 39 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 3 deletions(-) (limited to 'web/html.html') diff --git a/web/html.html b/web/html.html index 54bbb47..d9650cd 100644 --- a/web/html.html +++ b/web/html.html @@ -75,7 +75,7 @@ @@ -233,6 +233,39 @@ p { </div> </div> + +

Minimal tabs

+

Rendered html

+
<script>
+const showTab = (E, T) => {
+    const TABS = Array.from(document.getElementsByClassName("content"));
+    TABS.forEach(T => {
+        T.style.display = "none";
+    });
+
+    document.getElementById(T).style.display = "block";
+};
+
+window.onload = () => {
+    document.getElementById("bTab1").onclick = (E) => {
+        showTab(E, "tTab1");
+    };
+    document.getElementById("bTab2").onclick = (E) => {
+        showTab(E, "tTab2");
+    };
+}
+</script>
+
+<button type="button" id="bTab1">Tab1</button>
+<button type="button" id="bTab2">Tab2</button>
+
+<div id="tTab1" class="content" style="display: block;">
+    <p>Some content goes here ...</p>
+</div>
+
+<div id="tTab2" class="content" style="display: none;">
+    <p>... and there.</p>
+</div>
@@ -242,7 +275,7 @@ p { -
@@ -254,7 +287,7 @@ p { - -- cgit v1.2.3