Roll out your own Tab UI using HTML and JQuery

WHY RECREATE THE WHEEL?

There are lot of tab controls out there, both using plain javascript and others using Jquery, so why the need to create our own. There are two reasons for doing this:

Sometimes changing an existing control requires more time and effort than you are willing to put in.
Its a learning experience and your own code , which is customised for the task at hand, would always be lightweight and fast

What I am showing you here, is not exactly a readymade plugin or script which you just insert in your page and it will start working. This example is more of a reference which you can use to either make your own or simply change the existing code as required. I have focused more on making the code easy to understand rather than make into a proper MVC module or component.

Its easy to roll out your own tab control. This code took me about 30 minutes to make, so its not hard and complicated.

THE SAMPLE CODE

What we have here, is a block of 5 tabs, which when clicked show the relevant block of content. Though the example has a couple of lines of PHP code, the sample works fine as a pure html and css page. The php code is only to just change some front end settings as per the arguments passed. Those 2-3 lines can be easily removed. This sample uses the basic minimal jquery script , but does not use the jquery UI scripts.

WHAT IS THE PHP CODE DOING

I have made the tab UI into two styles: full and short. The full style is what comes by default. For the short style to show, we pass an argument in the querystring style=short

If you see the code below, you will notice that PHP is only being used to check the argument and change the CSS as required.

THE CSS

<?php if ($_GET['style'] == "short") { ?>
.seo_block {		
}
<?php } else { ?>

.seo_block {			
	background-color:#eeeeee;
	border:1px solid #cfcfcf;
}

<?php } ?>

.seoblock #seo_tabs {
	 padding:0; 
	 width:100%;
	background-color:#f6f6f6;
	border:1px solid #dbdbdb;
	 
 }

.seo_tab_selected {
	width:100%;
	height:30px;
	color:#ffffff;
	background-color:#cfcfcf;
	border:1px solid #cfcfcf;
	margin:0;
	width:100px;
	text-align:center;
}
.seo_tab {
	background-color:#ffffff;
	color:#cfcfcf;
	width:100%;
	height:30px;
	border:1px solid #cfcfcf;
	margin:0;
	width:100px;
	text-align:center;
}

.seo_tab_link_selected {
	font-size:16px;
	color:#ffffff;
	text-decoration:none;
	text-transform:uppercase;
	font-family:Arial;
	font-weight:bold;
}

.seo_tab_link {
	font-size:16px;
	color:#cfcfcf;
	text-decoration:none;
	text-transform:uppercase;
	font-family:Arial;
	font-weight:bold;
}

.seo_tab_content {
	text-align:left;
	padding-left:20px;
	padding-top:5px;
	min-height:200px;
	<?php if ($_GET['style'] == "short") { ?>
	 border:1px solid #cfcfcf;
	<?php } ?> 
	
}

.seo_tab_content a {
	font-size:14px;
	color:#352b48;
	text-decoration:none;
	font-family:Arial;
	font-weight:bold;

}

THE JAVASCRIPT

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {

	$('.lnk').click(function(){
				var thisId = $(this).attr("id");
				var id = thisId.substr(3,1);
				var i = 0;
				for(i = 0; i<=5; i++ ) {
					$('#stabs-' + i).hide();
					$('#std' + i).removeClass("seo_tab_selected");
					$('#std' + i).addClass("seo_tab");
					$('#lnk' + i).removeClass("seo_tab_link_selected");
					$('#lnk' + i).addClass("seo_tab_link");

				}

				$('#stabs-' + id).show();
				$('#std' + id).addClass("seo_tab_selected");
				$('#std' + id).removeClass("seo_tab");
				$(this).removeClass("seo_tab_link");
				$(this).addClass("seo_tab_link_selected");


							
				return false;
			});
		
	});
</script>

THE HTML

	<div class="seo_block">
	<div id="seo_tabs">

	<?php if ($_GET['style'] != "short") { ?>
		<table width="100%" cellpadding=0 cellspacing=0 border=0>
	<?php } else { ?>
		<table cellpadding=0 cellspacing=0 border=0>
	<?php } ?>	
		
			<tr>
				<td width=20%  id="std1" class="seo_tab_selected">
					<a href="#" id="lnk1" class="seo_tab_link_selected lnk">Tab 1</a>

				</td>
				<Td class="seo_tab" id="std2">
					<a  id="lnk2" href="#" class="seo_tab_link lnk">Tab 2</a>
				</td>
				<Td class="seo_tab" id="std3">
					<a href="#"  id="lnk3" class="seo_tab_link lnk">Tab 3</a>
				</td>
				<Td class="seo_tab" id="std4">
					<a href="#"  id="lnk4" class="seo_tab_link lnk">Tab 4</a>
				</td>
				<Td class="seo_tab" id="std5">
					<a href="#"  id="lnk5" class="seo_tab_link lnk">Tab 5</a>

				</td>
			</tr>
			
		</table>

								<div id="stabs-1" class="seo_tab_content">
									Content 1								
								</div>
								<div id="stabs-2"   class="seo_tab_content" style="display:none;">
									Content 2	
								</div>
								<div id="stabs-3"  class="seo_tab_content" style="display:none;">
									Content 3	
								</div>
								<div id="stabs-4"   class="seo_tab_content" style="display:none;">
									Content 4	
								</div>
								<div id="stabs-5"  class="seo_tab_content" style="display:none;">
									Content 5		
								</div>
	</div>	
	</div>