Skip to content

Instantly share code, notes, and snippets.

@mmpataki

mmpataki/tabs.html

Created July 4, 2021 07:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mmpataki/b1e792dbe794d44d6d0d826201f6efe6 to your computer and use it in GitHub Desktop.
Save mmpataki/b1e792dbe794d44d6d0d826201f6efe6 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Tabs
Raw
tabs.html
<html>
<style>
.tabh1 + label, .tabh2 + label, .tabh3 + label { padding: 2px 8px; border: solid 1px lightgray; display: inline-block; border-bottom: none; }
.tabh1:checked + label, .tabh2:checked + label, .tabh3:checked + label { background: olivedrab; }
.tabh1, .tabh2, .tabh3 { display: none;}
.tabc1, .tabc2, .tabc3 { display: none; padding: 20px; border: solid 1px lightgray;}
.tabh1:checked ~ .tabc1, .tabh2:checked ~ .tabc2, .tabh3:checked ~ .tabc3 { display: block; }
</style>
<div>
<input id='th1' type='radio' name='tswitcher' class='tabh1' checked></input>
<label for="th1">tab1</label>
<input id='th2' type='radio' name='tswitcher' class='tabh2'></input>
<label for="th2">tab2</label>
<input id='th3' type='radio' name='tswitcher' class='tabh3'></input>
<label for="th3">tab3</label>
<div class='tabc1'>Content tab 1</div>
<div class='tabc2'>Content tab 2</div>
<div class='tabc3'>Content tab 3</div>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment