Douglas on Web Applications

Incredibly Simple Tabs with jQuery

Whenever I need inline tabs, I find myself traveling down the same well trod paths. There are dozens of plugins but where they usually fail is in simplifying skinning. Solution:

1. Create each tab row as a graphic (so all tabs but the selected one in a row would look the same
2. Add images to page surrounding each as a DIV
3. Add a bit of jQuery to hide show appropriate tab & content on click

Here's the CSS:

 
<div id="tabs">
<div id="speakers"><img src="img/tabs-speakers.gif" width="724" height="41" alt="Speakers" /></div>
<div id="events"><img src="img/tabs-events.gif" width="724" height="41" alt="Speakers" /></div>
<div id="tabs-content">
<div id="speakers-content" class="tab-content">
 
Content for speakers
</div>
<div id="events-content" class="tab-content">
 
Content for events
</div>
</div>
</div>
 

Next, add the javascript:

var tabArray=new Array("speakers","events");
$(document).ready(function() {
   $('#events').hide();
   $('#events-content').hide();
   $('#tabs').click(function() {
	   $.each(tabArray, function(index, value) {
		   $('#'+value).toggle();
		   $('#'+value+'-content').toggle();
	   });
   });
});

Tags: images, jQuery, simple, tabs