Simple CSS Tabs with jQuery – Version 2

This is the updated version of the CSS tabs that I have posted long time ago. I have included some of the features that were requested.

What’s new in this version of CSS tabs? Quite a few things. You can now set multiple tab containers per page, set active tabs by using hash in the link and two new designs.

The demo and source code are available. If you want to go into details on how everything works, keep reading.

[view_demo url=”http://www.lessthanweb.com/demo/simple-css-tabs-with-jquery-v2/index.html” track_demo_category=”Demo” track_demo_action=”Simple CSS Tabs with jQuery V2″ source_url=”http://www.lessthanweb.com/demo/simple-css-tabs-with-jquery-v2/simple-css-tabs-with-jquery-v2.zip” track_source_category=”Downloads” track_source_action=”Simple CSS Tabs with jQuery V2″]

HTML

Let’s take a look at a few things that are new in the HTML. I will take only the HTML code of the first tabs as an example.

Having 3 separate tab containers means that an extra div tag needs to be added around the tab and content containers. This container is called tabs_wrapper. Not a must but it helps. ;)

The big new thing that we have here is the rel attribute in the link tag. This rel attribute must match the href attribute and also the id attribute of the content container.

Let’s look at Tab 1 for example. The href and rel attributes in the link have the same word in this case “tab1”. This word needs to be set as an id attribute for the content container div.

Here are the two lines that must match.

<!--    Link href and rel attributes must be the same -->
<li><a href="#tab1" rel="tab1">Tab 1</a></li>
<!--   The id attribute must match the link href and rel attributes -->
<div id="tab1" style="display: block;">

Now you can look at the whole block of code below and as you can see, each tab link has href and rel attributes that match each other and also the id attribute of the content container.

<div class="tabs_wrapper">
	<!-- Original tabs START -->
	<div id="original_tabs">
		<ul>
			<li class="active"><a href="#tab1" rel="tab1">Tab 1</a></li>
			<li><a class="icon_accept" href="#tab2" rel="tab2">Tab with icon</a></li>
			<li><a href="#tab3" rel="tab3">Long name for the last tab</a></li>
		</ul>
	</div>
	<div id="original_tabs_content">
		<div id="tab1" class="tab_content" style="display: block;">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
		</div>
		<div id="tab2" class="tab_content">
			<p>This tab has icon in it.</p>
		</div>
		<div id="tab3" class="tab_content">
			<p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
		</div>
	</div>
	<!-- Original tabs END -->
</div>

That’s really the only change when it comes to HTML. It’s still pretty simple.

CSS

The next part is the CSS styles. They are the same as they were before really. Nothing changed apart from the naming as we now have 3 different styles of tabs. We can skip this part.

jQuery

Ah yes, the jQuery time. :) When it comes to jQuery, I have added a few things.

Before I post the code, let me explain that now you can use hash in the URL and the tab will be active. You can even select multiple tabs in different tab container using hash by separating the IDs with a comma. Look at the example and click on the link above the tabs.

Here is the code, I have commented it as much as possible. If something is unclear, do ask.

$(document).ready(function(){
	//	Main function that shows and hides the requested tabs and their content
	var set_tab = function(tab_container_id, tab_id){
		//	Remove class "active" from currently active tab
		$('#' + tab_container_id + ' ul li').removeClass('active');

		//	Now add class "active" to the selected/clicked tab
		$('#' + tab_container_id + ' a[rel="'+tab_id+'"]').parent().addClass("active");

		//	Hide contents for all the tabs.
		//	The '_content' part is merged with tab_container_id and the result
		//	is the content container ID.
		//	For example for the original tabs: tab_container_id + '_content' = original_tabs_content
		$('#' + tab_container_id + '_content .tab_content').hide();

		//	Show the selected tab content
		$('#' + tab_container_id + '_content #' + tab_id).fadeIn();
	}

	//	Function that gets the hash from URL
	var get_hash = function(){
		if (window.location.hash) {
			//	Get the hash from URL
			var url = window.location.hash;

			//	Remove the #
			var current_hash = url.substring(1);

			//	Split the IDs with comma
			var current_hashes = current_hash.split(",");

			//	Loop over the array and activate the tabs if more then one in URL hash
			$.each(current_hashes, function(i, v){
				set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v);
			});
		}
	}

	//	Called when page is first loaded or refreshed
	get_hash();

	//	Looks for changes in the URL hash
	$(window).bind('hashchange', function() {
		get_hash();
	});

	//	Called when we click on the tab itself
	$('.tabs_wrapper ul li').click(function() {
		var tab_id = $(this).children('a').attr('rel');

		//	Update the hash in the url
		window.location.hash = tab_id;

		//	Do nothing when tab is clicked
		return false;
	});
});

Note: Because of the lack of support for window.location.hash the tabs do not work in IE7 and below!

You can of course recode that part or throw out the whole hash part of the javascript if you do not need it and the tabs should also work in IE7.