diff options
| author | Johannes Stoelp <johannes.stoelp@gmail.com> | 2022-10-29 22:44:42 +0200 |
|---|---|---|
| committer | Johannes Stoelp <johannes.stoelp@gmail.com> | 2022-10-29 23:01:06 +0200 |
| commit | cb9fa4169136275b86dde95310eb288dba5a7da6 (patch) | |
| tree | 97dd7de88ce36487fb1a28024c12041627e34c3a | |
| parent | b0eee0b58e4cb67d3a1faae3b2acc802f71551e4 (diff) | |
| download | notes-cb9fa4169136275b86dde95310eb288dba5a7da6.tar.gz notes-cb9fa4169136275b86dde95310eb288dba5a7da6.zip | |
html: tabs with javascript
| -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> |