Simple CSS Tabs with jQuery

UPDATE: New version of the CSS tabs is now available here.

A few months ago I needed CSS tabs with icon support. I was searching on the internet, found and tested a lot of different tabs but at the end I decided to do my own version as none of them were what I was looking for.

Today I decided to share them with the world. :)

So here you have my version of the really simple, clean CSS tabs that support icons.

Want to see them in action? Click below.

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

If you are interested in knowing how they work, continue reading.

First, what do this tabs need to work?

3 things:

• HTML
• CSS
• jQuery

HTML

For the actual tabs, we are going to use unordered list. The HTML code is pretty straight forward.

<div id="tabs_container">
	<ul id="tabs">
		<li class="active"><a href="#tab1">Tab 1</a></li>
		<li><a class="icon_accept" href="#tab2">Tab with icon</a></li>
		<li><a href="#tab3">Long name for the last tab</a></li>
	</ul>
</div>

Class “icon_accept” is the class that contains the icon. Now if you wish to add different icon for each tab, you will need to create new class for each icon and add it to the tab.

And the HTML for the content DIVs.

<div id="tabs_content_container">
	<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>

As you can see, each tab has a link that connects itself to the content DIV.

For the content to change on tab click, we will use jQuery later on.

CSS

Now let’s move to the CSS code.

#tabs_wrapper {
	width: 422px;
}
#tabs_container {
	border-bottom: 1px solid #ccc;
}
#tabs {
	list-style: none;
	padding: 5px 0 4px 0;
	margin: 0 0 0 10px;
	font: 0.75em arial;
}
#tabs li {
	display: inline;
}
#tabs li a {
	border: 1px solid #ccc;
	padding: 4px 6px;
	text-decoration: none;
	background-color: #eeeeee;
	border-bottom: none;
	outline: none;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
#tabs li a:hover {
	background-color: #dddddd;
	padding: 4px 6px;
}
#tabs li.active a {
	border-bottom: 1px solid #fff;
	background-color: #fff;
	padding: 4px 6px 5px 6px;
	border-bottom: none;
}
#tabs li.active a:hover {
	background-color: #eeeeee;
	padding: 4px 6px 5px 6px;
	border-bottom: none;
}

#tabs li a.icon_accept {
	background-image: url(accept.png);
	background-position: 5px;
	background-repeat: no-repeat;
	padding-left: 24px;
}
#tabs li a.icon_accept:hover {
	padding-left: 24px;
}

#tabs_content_container {
	border: 1px solid #ccc;
	border-top: none;
	padding: 10px;
	width: 400px;
}
.tab_content {
	display: none;
}

As you can see, its pretty simple and nothing complicated.

Be aware that the round corners which we get by using this CSS

border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;

are not fully supported by all of the main browsers. Two of them, IE and Opera do not support this commands yet.

Round corners with CSS is part of CSS3 standard which is not finished yet.

Also, browsers that do support it, might show the round corners in a bit different way.

So use then if you want to.

Right, so now we have the HTML and CSS code all ready, all we need now is to connect the tabs with the content DIVs.

jQuery

The jQuery code is really simple.

$(document).ready(function(){
	//	When user clicks on tab, this code will be executed
	$("#tabs li").click(function() {
		//	First remove class "active" from currently active tab
		$("#tabs li").removeClass('active');

		//	Now add class "active" to the selected/clicked tab
		$(this).addClass("active");

		//	Hide all tab content
		$(".tab_content").hide();

		//	Here we get the href value of the selected tab
		var selected_tab = $(this).find("a").attr("href");

		//	Show the selected tab content
		$(selected_tab).fadeIn();

		//	At the end, we add return false so that the click on the link is not executed
		return false;
	});
});

That’s it. Hope you like it.