Simple tabs and panes with jQuery

If there’s one thing jQuery is good at, it’s doing complicated things with simple code. The code below is for a tab system. I’ve purposely kept the styling simple, and kept the jquery as minimal as possible. The advantage of this method over AJAX tabs (where they load from XML files) is that all your content is on the page already, great for SEO.

Demo of simple tabs in jQuery

Download ZIP of all files (3Kb)

Here’s the jQuery

$(document).ready(function(){
	$(".tab").click(function(){

		$(".tab").removeClass("selected");
		$(this).addClass("selected");

		$(".pane").addClass("hidden");
		$($(this).attr("href")).removeClass("hidden");	

	});
});

That’s it, that’s all the jQuery you need. Of course the HTML needs to be a bit more complex than the jQuery, but it’s simple enough.

Tab 1
Tab 2
Tab 3




	Tab 1 text


	Tab 2 text


	Tab 3 text

The tab_bar contains the tabs in an unordered list, this is the normal way of doing navigation, so makes it consistent with most other sites, it also uses the href attribute to contain the link to which pane you want to show. Each tab must have the class of tab, and each pane of ‘pane’ and make sure all panes you don’t want shown when the page loads are hidden using the corresponding class.

Each pane is just a DIV, so you can have anything in them you can have in a DIV tag. They must have the class pane, and an ID corresponding with the related tab.

The CSS is included in the ZIP file, and it’s simple enough to not need an explanation. I think this is the simplest code you can have to build tabs on your website.

Next steps: Build in tab grouping. Coming in a later tutorial.

Demo of simple tabs in jQuery

Download ZIP of all files (3Kb)