TAB WIDGET-1
.
.
.
.
.
<style>
.tabberlive .tabbertabhide {display:none;}
.tabber {}
.tabberlive {margin-top:1em;}
ul.tabbernav {margin:0; padding: 3px 0; border-bottom: 1px solid #33FFFF; font: bold 12px Arial;}
ul.tabbernav li {list-style: none; margin: 0; display: inline;}
ul.tabbernav li a {padding: 3px 0.5em; margin-left: 3px; border: 1px solid #33FFFF; border-bottom: 1px solid #33FFFF; background: #333333; text-decoration: none;}
ul.tabbernav li a:link {color: #FFFF00;}
ul.tabbernav li a:visited {color: #FFFF00;}
ul.tabbernav li a:hover {color: #FFFF00; background: #740777; border-color: #33FFFF;}
ul.tabbernav li.tabberactive a {background-color: #255720; border-bottom: 1px solid #33FFFF;}
ul.tabbernav li.tabberactive a:hover{color: #000000; background: #FFFF00; border-bottom: 1px solid #33FFFF;}
.tabberlive .tabbertab {padding:5px; height:auto; overflow:auto;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}
.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab2 .tabbertab {height:auto; overflow:auto;}
</style>
<script src="https://github-codes.github.io/mycodes/javascripts/tabs-1.js"></script>
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
