Tabs
Updated incorrect tags entry. Here is the right example to set multiple tabs and to make a tab active.
About
This script will allow you to create interactive tabs for use in an application.
The CSS and HTML:
<style>
#tabs{
margin-left: 4px;
padding: 0;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#tabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
#tabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}
#tabs a{
float:left;
background:#A3BBE6 url(images/tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
}
#tabs a span{
float:left;
display:block;
background: transparent url(images/tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}
#tabs a span{float:none;}
#tabs a:hover{background-color: #7E94B9;color: white;}
#tabs a:hover span{background-color: #7E94B9;}
#tabHeaderActive span, #tabHeaderActive a { background-color: #42577B; color:#fff;}
.tabContent {
clear:both;
border:2px solid #42577B;
padding-top:2px;
background-color:#FFF;
}
</style>
<div id="tabs">
<ul>
<li style="margin-left: 1px" id="tabHeaderActive"><a href="javascript:void(0)" onClick="toggleTab(1,6)"><span>Tab 1</span></a></li>
<li id="tabHeader2"><a href="javascript:void(0)" onClick="toggleTab(2,6)" ><span>Tab 2</span></a></li>
<li id="tabHeader3"><a href="javascript:void(0)" onclick="toggleTab(3,6)"><span>Tab 3</span></a></li>
<li id="tabHeader4"><a href="javascript:void(0)" onClick="toggleTab(4,6)"><span>Tab 4</span></a></li>
<li id="tabHeader5"><a href="javascript:void(0)" onclick="toggleTab(5,6);"><span>Tab 5</span></a></li>
<li id="tabHeader6"><a href="javascript:void(0)" onclick="toggleTab(6,6);"><span>Tab 6</span></a></li>
</ul>
</div>
<div id="tabscontent">
<div id="tabContent1" class="tabContent" style="display:yes;">
<br /><div>First Tab Content goes here</div>
</div>
<div id="tabContent2" class="tabContent" style="display:none;">
<br /><div>Second Tab Content goes here</div>
</div>
<div id="tabContent3" class="tabContent" style="display:none;">
<br /><div>Third Tab Content goes here</div>
</div>
<div id="tabContent4" class="tabContent" style="display:none;">
<br /><div>Fourth Tab Content goes here</div>
</div>
<div id="tabContent5" class="tabContent" style="display:none;">
<br /><div>Fifth Tab Content goes here</div>
</div>
<div id="tabContent6" class="tabContent" style="display:none;">
<br /><div>Sixth Tab Content goes here</div>
</div>
</div><!--End of tabscontent-->
</div><!--End of tabs-->
The Javascript:
/*-----------------------------------------------------------
Toggles element's display value
Input: any number of element id's
Output: none
---------------------------------------------------------*/
function toggleDisp() {
for (var i=0;i<arguments.length;i++){
var d = $(arguments[i]);
if (d.style.display == 'none')
d.style.display = 'block';
else
d.style.display = 'none';
}
}
/*-----------------------------------------------------------
Toggles tabs - Closes any open tabs, and then opens current tab
Input: 1.The number of the current tab
2.The number of tabs
3.(optional)The number of the tab to leave open
4.(optional)Pass in true or false whether or not to animate the open/close of the tabs
Output: none
---------------------------------------------------------*/
function toggleTab(num,numelems,opennum,animate) {
if ($('tabContent'+num).style.display == 'none'){
for (var i=1;i<=numelems;i++){
if ((opennum == null) || (opennum != i)){
var temph = 'tabHeader'+i;
var h = $(temph);
if (!h){
var h = $('tabHeaderActive');
h.id = temph;
}
var tempc = 'tabContent'+i;
var c = $(tempc);
if(c.style.display != 'none'){
if (animate || typeof animate == 'undefined')
Effect.toggle(tempc,'blind',{duration:0.5, queue:{scope:'menus', limit: 3}});
else
toggleDisp(tempc);
}
}
}
var h = $('tabHeader'+num);
if (h)
h.id = 'tabHeaderActive';
h.blur();
var c = $('tabContent'+num);
c.style.marginTop = '2px';
if (animate || typeof animate == 'undefined'){
Effect.toggle('tabContent'+num,'blind',{duration:0.5, queue:{scope:'menus', position:'end', limit: 3}});
}else{
toggleDisp('tabContent'+num);
}
}
}
