Jqueryless tabs for multiple use on one page

tabs.html

<style>
.tab-menu { border-bottom: 1px solid #eee; padding: 0; }
    .tab-menu:before, 
    .tab-menu:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
    .tab-menu:after { clear: both; }
.tab-menu li { float: left; list-style: none; }
.tab-menu li a { background: #fff; border: 1px solid #eee; border-bottom: 0; display: block; padding: 10px; }
.tab-menu .selected { margin-bottom: -1px; padding-bottom: 11px; }
.tab-item { clear: left; display: none; }
.tab-item-selected { display: block; }
</style>	
<div class="tabs">
    <ul class="tab-menu">
        <li><a class="selected" href="javascript:void(0);" id="tab-1" onclick="toggle('1', 'tab', '5');return false;">Tab 1</a></li>
        <li><a href="javascript:void(0);" id="tab-2" onclick="toggle('2', 'tab', '5');return false;">Tab 2</a></li>
        <li><a href="javascript:void(0);" id="tab-3" onclick="toggle('3', 'tab', '5');return false;">Tab 3</a></li>
        <li><a href="javascript:void(0);" id="tab-4" onclick="toggle('4', 'tab', '5');return false;">Tab 4</a></li>
        <li><a href="javascript:void(0);" id="tab-5" onclick="toggle('5', 'tab', '5');return false;">Tab 5</a></li>
    </ul>
    <div id="div-tab-1" class="tab-item-selected">
        Tab 1
    </div><!-- /#div-tab-1 -->
    <div id="div-tab-2" class="tab-item">
        Tab 2
    </div><!-- /#div-tab-2 -->
    <div id="div-tab-3" class="tab-item">
        Tab 3
    </div><!-- /#div-tab-3 -->
    <div id="div-tab-4" class="tab-item">
        Tab 4
    </div><!-- /#div-tab-4 -->
    <div id="div-tab-5" class="tab-item">
        Tab 5
    </div><!-- /#div-tab-5 -->
</div><!-- /.tabs -->

<script>
function toggle(num, tabId, int) {
    var i=1; while(i<=int) {
        if(num==i) {
            document.getElementById(tabId+"-"+i).className='selected';
            document.getElementById("div-"+tabId+"-"+i).style.display="block";
        } else {
            document.getElementById(tabId+"-"+i).className='null';
            document.getElementById("div-"+tabId+"-"+i).style.display="none";
        }
        i++;
    }
}
</script>