diff options
| -rw-r--r-- | src/web/html.md | 6 | ||||
| -rw-r--r-- | src/web/src/tabs.html | 30 |
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> |