html: tabs with javascript

2 files changed, 36 insertions, 0 deletions

diff --git a/src/web/html.md b/src/web/html.md
index e31f325..4f545e1 100644
--- a/src/web/html.md
+++ b/src/web/html.md
@@ -18,3 +18,9 @@
 ```html
 {{#include src/grid-area.html }}
 ```
+
+# Minimal tabs
+[Rendered html](src/tabs.html)
+```html
+{{#include src/tabs.html }}
+```
diff --git a/src/web/src/tabs.html b/src/web/src/tabs.html
new file mode 100644
index 0000000..af3f56a
--- /dev/null
+++ b/src/web/src/tabs.html
@@ -0,0 +1,30 @@
+<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>