Creating tabs with simple javascript and CSS

Please Digg, Buzz, ReTweet this Submission. If you liked it push the "Like It" button. Thank You :)

Now a days, tabs are becoming very popular on websites. You may have seen them in many websites including PlanetMaks. Well there are many ways to create such tabs. I will teach you how to create them with ease with just simeple javascript and css. There are only three parts of the code. The CSS part, JavaScript part and Html Part.

Let me first show you the Css Part:

<style type="text/css">
	body { margin: 10px; font-family: Arial; font-size: 12px; }
	.updBtn_Container { width: 400px; height:275px; margin-bottom: 10px; float: left;}
	.updBtn_Bar { clear: both; width: 397px; height: 27px; border-bottom: 1px solid #cde6fe; padding-left: 5px; }
	.updBtn_ContentPanel { clear: both; width: 400px; height: 240px; border: 1px solid #afcfee; border-top: 0px; background-color: #ffffff; }
	.updBtn_Content { clear: both; width: 380px; height: 240px; padding: 10px;}
	.updBtn { float: left; width: 80px; background: url(images/updBtn.jpg) repeat-x #F7F7F7; border: 1px solid  #afcfee; border-bottom: 0px; height: 16px; padding: 5px; text-align: center; margin-right: 3px; color: #333333; cursor: pointer;}
	.updBtn_Highlight { float: left; width: 80px; background: url(images/updBtn_h.jpg) repeat-x #F7F7F7; border: 1px solid  #afcfee; border-bottom: 0px; height: 16px; padding: 5px; text-align: center; margin-right: 3px; color: #000000; cursor: pointer;}
	.updBtn_Selected { float: left; width: 80px; background-color: #ffffff; border: 1px solid  #afcfee; border-bottom: 1px solid #ffffff; color: #52738f; height: 16px; padding: 5px; text-align: center; margin-right: 3px; cursor: pointer;}

</style>

As you can see from the above CSS it is not more then just simple formatting CSS. This code is easily customizable.

The JavaScript:

<script language="javascript" type="text/javascript">
	function updButton(obj)
	{
		var cls = obj.className;
		
		if(cls!='updBtn_Selected')
		{
			if(cls=='updBtn')
			{
				cls = 'updBtn_Highlight';
			}
			else
			{
				cls = 'updBtn';
			}
		}
		
		obj.className = cls;
	}
	
	function selectUpd(obj)
	{
		for (var x = 1; x <= 3; x++)
		{
			document.getElementById("updButton"+x).className = 'updBtn';
			document.getElementById("updContent"+x).style.display = 'none';
		}
		
		obj.className='updBtn_Selected';
		var tmp = obj.id;
		var num = tmp.substr(tmp.length-1);
		document.getElementById("updContent"+num).style.display = 'block';
	}
</script>

The script is not more then the chaning of classes on various events. It is easily understandable. See the last function in the script where "3" is bold. If you have more then 3 Tabs you can change this number as "No Of Tabs". The default no. of tabs in this script are "3"

Now for the final part:

<div class="updBtn_Bar">
	<div id="updButton1" onclick="javascript: selectUpd(this);" class="updBtn_Selected" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 1</div>
	<div id="updButton2" onclick="javascript: selectUpd(this);" class="updBtn" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 2</div>
	<div id="updButton3" onclick="javascript: selectUpd(this);" class="updBtn" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 3</div>

</div>
<div class="updBtn_ContentPanel">
	<div id="updContent1" class="updBtn_Content">Content Of Link 1</div>
	<div id="updContent2" class="updBtn_Content" style="display: none;">Content Of Link 2</div>
	<div id="updContent3" class="updBtn_Content" style="display: none;">Content Of Link 3</div>
</div>

In the above HTML "updBtn_Bar" div holds the buttons while the second div holds the containers. If you want to increase the no. of tabs then copy then first make a copy of the button's code and change it name according to its tab number, same thing is to be done with the container. There is no need of any other change execpt for changing the number in javascript that is highlighted.

The complete code can be downloaded from here: tabs.rar (1.46kb)