From 5d4dcf42eb363d9ab7745baf30b7b66b6bf81ecc Mon Sep 17 00:00:00 2001
From: Marc Beninca <marc@beninca.link>
Date: Fri, 30 Jun 2023 18:00:14 +0200
Subject: [PATCH] subtabs test

---
 test.css  | 33 +++++++++++++++++++++++++
 test.html | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 test.css
 create mode 100644 test.html
diff --git a/test.css b/test.css
new file mode 100644
index 0000000..b3a11c8
--- /dev/null
+++ b/test.css
@@ -0,0 +1,33 @@
+.tabs {
+display: flex;
+flex-wrap: wrap;
+}
+.tabs > input {
+display: none;
+}
+.tabs > input:checked + label + div {
+display: block;
+}
+.tabs > label {
+order: 1;
+}
+.tabs > div {
+display: none;
+flex-basis: 100%;
+order: 2;
+}
+
+/**/
+
+.tabs {
+border: 1px solid;
+}
+.tabs > input:checked + label {
+background-color: gray;
+}
+.tabs > label {
+padding: 10px;
+}
+.tabs > div {
+padding: 10px;
+}
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..6b06224
--- /dev/null
+++ b/test.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html><html><head>
+<!----------------------------------------------------------------------------->
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="initial-scale=1,width=device-width" />
+<link rel="stylesheet" href="test.css" />
+
+<!----------------------------------------------------------------------------->
+</head>
+<body onload="main()"><header>
+<!----------------------------------------------------------------------------->
+
+<h1>Tabs</h1>
+<ul>
+<li><a href="test.html">test.html</a></li>
+<li><a href="test.html?tab=2/3">test.html?tab=2/3</a></li>
+</ul>
+
+<!----------------------------------------------------------------------------->
+</header><main>
+<!----------------------------------------------------------------------------->
+
+<div class="tabs">
+    <input type="radio" id="tab/1" name="tab" onclick="update(id)">
+    <label for="tab/1">Tab: 1</label>
+    <div>
+        <div class="tabs">
+            <input type="radio" id="tab/1/1" name="tab/1" onclick="update(id)">
+            <label for="tab/1/1">Tab: 1 / 1</label>
+            <div>Tab: One / One</div>
+            <input type="radio" id="tab/1/2" name="tab/1" onclick="update(id)">
+            <label for="tab/1/2">Tab: 1 / 2</label>
+            <div>Tab: One / Two</div>
+            <input type="radio" id="tab/1/3" name="tab/1" onclick="update(id)">
+            <label for="tab/1/3">Tab: 1 / 3</label>
+            <div>Tab: One / Three</div>
+        </div>
+    </div>
+    <input type="radio" id="tab/2" name="tab" onclick="update(id)">
+    <label for="tab/2">Tab: 2</label>
+    <div>
+        <div class="tabs">
+            <input type="radio" id="tab/2/1" name="tab/2" onclick="update(id)">
+            <label for="tab/2/1">Tab: 2 / 1</label>
+            <div>Tab: Two / One</div>
+            <input type="radio" id="tab/2/2" name="tab/2" onclick="update(id)">
+            <label for="tab/2/2">Tab: 2 / 2</label>
+            <div>Tab: Two / Two</div>
+            <input type="radio" id="tab/2/3" name="tab/2" onclick="update(id)">
+            <label for="tab/2/3">Tab: 2 / 3</label>
+            <div>Tab: Two / Three</div>
+        </div>
+    </div>
+</div>
+
+<script>
+function update(id) {
+    console.log(id)
+}
+function main() {
+    let tab = (new URL(document.location)).searchParams.get('tab')
+    if (tab) {
+        let path = 'tab'
+        let tabs = tab.split('/')
+        for (tab of tabs) {
+            path = `${path}/${tab}`
+            document.getElementById(path).checked = true
+        }
+    }
+}
+</script>
+
+<!----------------------------------------------------------------------------->
+</main></body></html>
