Create a Slick Tabbed Content Area using CSS & jQuery

Apr 23rd in HTML & CSS by Collis Ta'eed

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we're going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we'll achieve the same thing using the jQuery library.

Author: Collis Ta'eed

Hello! I'm a web and graphic designer who loves blogging, startups and everything about the web. You can find me on Twitter!

Step 1

First things first, we need something that looks awesome. So a quick trip to Photoshop and voila we have a nice mockup of what our tabbed component should look like. It's pretty straight forward with a few extra gradients to make it nettuts awesome. You can grab the Photoshop PSD file for this image if you want to take a closer look, but it's pretty simple and we can build it off the flat JPG really.

Step 2

The first thing to do when building of course is to get a rough idea how you are going to do it. This gets easier the more things you've developed. Looking at this image I would say the best thing to do is:

Have a container <div> which we'll place everything inside of. That way if we needed to position our box or drop it into a sidebar, we can just grab everything wrapped in the <div> and copy+paste it somewhere.
Then we'll have the heading area, probably with a <h> tag
Then below that we'll have a second <div> tag which will hold the tabs and content. This is the dark grey box in the image.
Then inside there we'll use an unordered list <ul> where each element is a link for the tabs. This will let us use the <li> bits of the list to position the tabs and the <a> bits to style them and give them rollovers and on/off states.
Then below that we'll create a final <div> area which has the content for each tab. We'll need one of these for each tab, and we'll show or hide them depending on which tab has been clicked.

SO to summarize, it'll be something like this:

<div>
	<h4>Heading</h4>
    <div>
    
        <ul>
            <li>Tab</li>
            <li>Tab</li>
            <li>Tab</li>
        </ul>
        
        <div>Content for Tab 1</div>
        <div>Content for Tab 2</div>
        <div>Content for Tab 3</div>
    
    </div>

</div>

Don't worry if looking at that image doesn't immediately make you think of that structure. Sometimes you just need to do things by trial and error. In my case I've made these little tabbed things a few times and I know that this is a nice simple way of making them.

Also it's nice to think about the structure like this before you have lots of class names and ids and content because it can get hard to see the forest from the trees later on. Especially when you add the content for all the different tabs.

So now that we have a picture in mind of how to build our structure, let's get to it!

Step 3

Now if you've followed my tutorials on PSDTUTS you'll know that I love a good gradient background. So before we even start with the tabbed structure, let's get ourselves a nice background!

Open up Photoshop, create a 1000px x 1000px document and draw a nice (subtle) radial gradient like the one shown below. Note that I've drawn out from the centre/top and made sure that the gradient is finished by the time I get to the edge of the document. That means I can set the background color in HTML to be the darker colour and if someone stretches their browser window it'll be seamless.

Step 4

So create a new directory for the project, then create a second directory inside there called images and save that image inside as background.jpg. When saving use File > Save for Web and Devices and select JPG with a quality setting of about 70. That comes out to a file size of 16kb which is not too bad. There used to be a time where you really had to scrimp and save, but now you just want to make sure you're not being stupidly wasteful with your file sizes.

Now we create a HTML document and write in some code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Tabbed Structure - Regular</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
</body>
</html>

So that will be the base of our HTML. Now we'll create the style.css document and write in the following:

body {
	background-image:url(images/background.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:#657077;
	margin:40px;
}

A couple of things to note here:

It's possible to write this same CSS using shorthand and reduce the number of lines used, but it's much clearer this way and better for tutorial writing!
We have a background image (the gradient) and we've set it to no-repeat, because we only want it to appear once, it's centered and finally the background color (#657077) is the darker colour.
I've added a margin of 40px. This is just for positioning my stuff later on so that it looks nice.

You can see the resulting HTML document here. Note that if you resize your window it's a nice seamless graduated background. Wunderbar!

Step 5

Next we add our structure to the page so that we can begin styling it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Tabbed Structure - Regular</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
    
        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Archives</a></li>
            <li><a href="" id="tab_2">Topics</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>
        
        <div id="content_1" class="content">Content for Tab 1</div>
        <div id="content_2" class="content">Content for Tab 2</div>
        <div id="content_3" class="content">Content for Tab 3</div>
    
    </div>

</div>


</body>
</html>

So as you can see I've basically used the same structure I mentioned in Step 2. I've added some ids and classes and some actual content. Here's the reasoning behind what I've done:

For the heading, I've placed the subtext "Select a Tab" in a <small> element. This lets me use the <h4> element for overall positioning and the <small> element to restyle and position the subtext.
The container <div> has an id="tabbed_box_1" and a class="tabbed_box". I've done this because we might reuse this code multiple times on the same page. If we did that we could use the id's to position each one in different places. But we'd still have the class to do the styling. Whereas if we'd use the id for styling, we'd end up having to define the same styles again and again for different id's.
I've given the links and content areas id's because we need to use Javascript to manipulate them later.
Finally I've given the <ul> element a class name. Actually we could style it without a class just by styling .tabbed_area ul { } but this could get confused with future <ul>'s we put inside the content area. So it's better for it to have a class name for us to refer to.

OK so without styles it doesn't really look like much.... yet!

Step 6

Now with styling up elements, I think it's best to work from the outside element in. So we'll start with this element - <div id="tabbed_box" class="container"> - which we'll use to position the box nicely in the center of our document using this code:


#tabbed_box {
	margin: 0px auto 0px auto;
	width:300px;
}

Step 7

Now we'll do the heading area. We can style the heading like this:


.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}

A few things to note here:

Instead of just defining styles for h4, I've defined for .tabbed_box h4. This is important in a larger HTML document because you might have another h4 style somewhere else. So you want to make sure you don't overlap or cause future overlap problems.
You'll notice I've also adjusted the bottom margin on the h4 to 10px. This is so that the spacing looks right. It's important to know that many elements have default values. For example a h4 already has a bottom margin, and it's larger than we'd want. So if we didn't set this ourselves it would appear with a larger margin. Some people use special stylesheets that reset all these default values, but I've gotten used to resetting them individually when I need to.
You'll see that I've also used the text-transform attribute to make the small text all capitals. We could of course have just written it in caps, but I just like doing it this way!
Also you'll notice in the small definition, I've given it a position:relative definition, this is so that I can adjust where it appears, moving it up 4px to the top and 6px to the right.
Finally when styling the h4 element I gave it a negative letter spacing, but that means the small element gets the same negative letter spacing too which we don't want. So I have to define it again as 0px there. This is thanks to the fact that styles cascade down - hence the name Cascading Style Sheets. Often times you'll notice something looks weird on your page and it will be because the element has inherited some style you totally forgot about. When I first did this bit of styling I stared at the small bit for ages trying to figure out why it looked so bunched up, until I remembered!

Step 8

Next we'll give our inner <div> a bit of styling with this code:


.tabbed_area {
	border:1px solid #494e52;
	background-color:#636d76;
	padding:8px;	
}

This just gives it a bit of definition and spaces the interior elements away from the sides. You can see where we're up to in the image below.

By working from the outside in, we've given our element a bit of shape and it's a lot easier to see how it's going to wind up looking. Also often you will have constraints coming from the outside in, for example the box might need to fit into a column of certain width. Finally it's also a good idea to go outside in, because then any style inheritance is clear. For example if you went the other way and did the interior elements first, later styles might affect those interior elements and you'd need to go back and readjust anyway.

Step 9

Now we get to the good stuff - the tabs! If we add this little piece of CSS we'll go a long way to making the tabs look more like tabs:


ul.tabs {
	margin:0px; padding:0px;
}
ul.tabs li {
	list-style:none;
	display:inline;
}

This code says that the <ul> element with class 'tabs' should have no margins and no padding. It also says that all the <li> elements within should have no bullet points attached to them. Finally we change the display from the default 'block' to 'inline'. Let me explain that last bit in a bit more detail.

Elements on a page generally have three common values for 'display'. They are block, inline, or none.
Setting an element to none makes it invisible. We'll use that fact later on.
Setting an element to inline make it flow along with other elements the way text does. So here instead of appearing below each other, the <li> elements flow along horizontally.
Setting an element to block makes it a rectangular area that appears generally below the last element.
That's a really simplified explanation, you can get a longer one over at Web Design From Scratch

There are actually other display values which you can read about at Quirksmode.

Step 10

Of course our 'tabs' still look pretty crappy, so let's give them some style. We've used the <li> element to position them, but we'll use the <a> element to style them, like this:


ul.tabs li a {
	background-color:#464c54;
	color:#ffebb5;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54; 
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54; 
	border-bottom: 1px solid #ffffff;
}

So what we've done here is:

Style up the <a> tag so that it's padded out and has the right background and text colours, and has the right font settings.
Created a second style for a:hover and darkened the background color and border. Note that we don't need to set all the other <a> settings because they are inherited. We just need to change the ones that we want changed when the user rolls their mouse over the tab.
Finally we have a third style for when the <a> has a class="active". In other words for the tab that is selected. Here again we set the background colour to white and change the text colour. One thing to note is that we also change the bottom border to white. This is so that the tab will look like it is attached to the content area (when we add it in later!)

Step 11

There are two things we need to do to make the content areas work. The first is we should make the second two areas vanish and the second is to make them look appropriately styled.

.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54; 	
}
#content_2, #content_3 { display:none; }

You'll see that the first part of the CSS tells the browser that all elements with class="content" should be white with padding and a border (the same colour as the tabs). The second part says that the elements with id="content_2" and id="content_3" should have a display:none, or in otherwords should be invisible.

Later on when we add some Javascript we can use the script to alternate between display:none and display:block to make them show and hide.

So here's how our tabs are looking, you can also see a HTML version of where we are at. As you can see it's looking pretty close now, but we need to fix the spacing and add some actual content in.

Step 12

Fixing the spacing issue is actually simply a matter of adding margins back to the <ul> element like this:


ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}

To be perfectly honest I'm not sure why that spacing issue occurred. Sometimes HTML mystifies me, but I just adjust settings until things right themselves. Sometimes in the process I figure out what was the cause, sometimes I don't. I guess what I'm saying is, unless you're going to really get into the nitty gritty details of w3 specs, sooner or later you're going to run into some issues that you can't explain. Don't let it get you down, just adjust until you find a fix or a solution.

Step 13

Now we'll add some content into the content area. I avoided this earlier as I wanted to keep the HTML looking simple. Here's some:

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
    
        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Topics</a></li>
            <li><a href="" id="tab_2">Archives</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>
        
        <div id="content_1" class="content">
        	<ul>
            	<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
            	<li><a href="">CSS Styling <small>32 Posts</small></a></li>
            	<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
            	<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
            	<li><a href="">Site News <small>6 Posts</small></a></li>
            	<li><a href="">Web Development <small>8 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_2" class="content">
        	<ul>
            	<li><a href="">December 2008 <small>6 Posts</small></a></li>
            	<li><a href="">November 2008 <small>4 Posts</small></a></li>
            	<li><a href="">October 2008 <small>22 Posts</small></a></li>
            	<li><a href="">September 2008 <small>12 Posts</small></a></li>
            	<li><a href="">August 2008 <small>3 Posts</small></a></li>
            	<li><a href="">July 2008 <small>1 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_3" class="content">
        	<ul>
            	<li><a href="">Home</a></li>
            	<li><a href="">About</a></li>
            	<li><a href="">Contribute</a></li>
            	<li><a href="">Contact</a></li>
			</ul>
        </div>
    
    </div>

</div>

So here I've just added a bunch of unordered lists in to the three content areas. Incidentally I'm mocking this up as if it was to be used on a WordPress blog. But really you could be using this for all sorts of things. The new FlashDen homepage that I worked on a few days ago uses tabbed areas to show different types of recent files.

Now we'll add some styling to make those look a bit nicer:


.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li a small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:4px;
	top:0px;
}

Once again we're styling our lists up. This time rather than giving the <ul> element a classname, I've simply added styles to all <ul> elements inside elements with the class="content". This just means I don't need to write as many class names into my HTML which makes it neater and cleaner.

Other things to note:

Once again we've removed the bullet points off the <li> elements with list-style:none.
This time we're styling the list elements as opposed to the <a>'s. This is important because if we might have a menu item which isn't a link, and this way it'll still fit neatly in.
Once again I've used a <small> wrapped inside the <a> to make the post count. I've used a text-transform to make it all caps and some relative positioning to nudge it over to the right a bit.

Step 14

So this is what our page looks like:

Overall it's pretty good except we have one too many borders. But that's OK, we can fix it with a magic pseudo-selector called 'last-child' like this:

.content ul li:last-child {
	border-bottom:none;
}

This style just applies to the last element of its own kind - i.e. that last <li> element. Now I should point out that last-child doesn't work in all browsers. In particular IE6 doesn't like it. But that's OK because it's not the end of the world if the border is there, and it's my subtle way of punishing anyone who hasn't got an at least vaguely up to date browser :-)

Step 15

Now there's just one more step to finish our HTML, and that is to some nice background images to our elements. As you will recall some of the elements in my original PSD file had subtle gradients. So now it's time to add those in. There are three graduated bits: (a) on the active tab (b) on the inactive tabs and (c) at the bottom of the content area. Here are the three images we'll be needing:

They're a bit hard to see, but basically they are each small slices of gradient that we'll set as repeating background images. Here is a close up of the one for the tab (note I've added a thin border around it so it's a bit clearer. Notice that there is a 1px white line at the top. That will make the tab look really sharp.

So we need to make a few adjustments to the CSS code to add in background images, like this:

ul.tabs li a {
	background-image:url(images/tab_off.jpg);
	background-repeat:repeat-x;	 
	background-position:bottom;
}
ul.tabs li a.active {
	background-image:url(images/tab_on.jpg);
	background-repeat:repeat-x;
	background-position:top; 
}
.content {
	background-image:url(images/content_bottom.jpg);
	background-repeat:repeat-x;	 
	background-position:bottom;	
}

Note that I actually inserted these extra bits in with the rest of their class definitions, but for the sake of brevity have just copied in extracts. As you can see in all three cases we're repeating a background image along the x axis only. In the case of two (the off tab and the content area) we're doing it along the bottom, and in the other it's along the top.

Styled!

And with that we've officially finished the HTML/CSS part of this tutorial. You can see the finished styled page here.

Adding a Simple Script

The next thing we need to do is add some Javascript to make our tabs actually do something. First we're going to do this by hand and then I'll show you how to use a Javascript library to accomplish the same thing. Now I should point out that I'm no JS expert, and I'm hoping to bring in some real programatic masters to write tutorials here, so if you notice me doing anything which is a bit dubious, feel free to leave a comment and I'll touch up the tutorial and make it a little more best practices!

So first let's outline what we want to do when someone clicks on a tab. We want to switch off our current tab, switch on the new one, hide the current content area and show the new one.

Now we could have something clever that works out which tab is currently on and switches it off, but it's easier just to go through and switch them all off, and then switch on the one we want. Similarly for the content areas, we can hide all three of them and then show the one we want. This saves us having to work out the current state of affairs.

Finding Elements using the DOM

The elements we are working with look like this:

<a href="" id="tab_1" class="active">
<div id="content_1" class="content">

Now in Javascript we can find an element simply by using it's id and the document.getElementById() method. So document.getElementById('content_1') would give us the first content area. We can then set it's display style to none using this line:

document.getElementById('content_1').style.display = 'none';

Similarly to see a class we use:

document.getElementById('tab_1').className = 'active';

So then a really simple approach would be to write:

function tabSwitch(new_tab, new_content) {
	
	document.getElementById('content_1').style.display = 'none';
	document.getElementById('content_2').style.display = 'none';
	document.getElementById('content_3').style.display = 'none';		
	document.getElementById(new_content).style.display = 'block';	
	

	document.getElementById('tab_1').className = '';
	document.getElementById('tab_2').className = '';
	document.getElementById('tab_3').className = '';		
	document.getElementById(new_tab).className = 'active';		

}

This would be placed inside a file, let's call it functions.js. We'd then call this script by changing our tab links to:


<script src="functions.js" type="text/javascript"></script>	
<ul class="tabs">
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Topics</a></li>
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Archives</a></li>
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Pages</a></li>
</ul>

And sure enough, here's an example of our super simple javascript example. It works!

A More Complex Script

Now there are some very obvious problems with this script. Not least of which is that if you add another tab you're going to have to change your function. And if you had more than one set of tabs on a page you'll need two functions! So let's beef it up a little:


function tabSwitch_2(active, number, tab_prefix, content_prefix) {
	
	for (var i=1; i < number+1; i++) {
	  document.getElementById(content_prefix+i).style.display = 'none';
	  document.getElementById(tab_prefix+i).className = '';
	}
	document.getElementById(content_prefix+active).style.display = 'block';
	document.getElementById(tab_prefix+active).className = 'active';	
	
}

Our second version of the tab switching function takes a couple more arguments but is a bit cleverer. It assumes that we have a set of tabs and a set of content areas and they have id's that have a prefix and a set of incrementing numbers. I.e. tab_1, tab_2 ... and content_1, content_2 ...

The first argument our function takes, 'active', is the number tab/content we want on. The second argument, 'number', is the number of tabs being used. The third and fourth arguments are the prefixes used in the ids of our elements.

The function then has a for loop that cycles through from 1 to the number of tabs and switches them all off, then switches the two we want back on at the end. In other words it's the same script as before, but we've just made it a tiny bit smarter.

So in our example to call the function we would have this code:


<script src="functions.js" type="text/javascript"></script>	
<ul class="tabs">
    <li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Topics</a></li>
    <li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">Archives</a></li>
    <li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">Pages</a></li>
</ul>

This means that later on if we had a second set of tabs, we could give them different id prefixes and use the same function again and again.

View the second javascript example.

Using jQuery

Lately there have been a lot of Javascript libraries appearing, and in fact there are (at least) two that are specifically made for achieving this tab effect: MooTabs and DomTab. I haven't used either, but from a brief glance they looked quite usable.

However as I've heard a lot about the jQuery library, I decided to attempt the same tab switching using jQuery. I have a feeling my solution could use some work, but it's still interesting to look through.

So first, go to the jQuery site and download the latest version of their script library.

Getting the Hang of jQuery

jQuery provides a bunch of functions that allow you to select groups of things. For example if you wanted to select every element on the page that is a link (i.e. <a> elements) and then make them vanish, you would place this in your <head> area:

<script src="scripts/jquery-1.2.3.min.js">
<script>
	
	// When the document loads do everything inside here ...
	$(document).ready(function(){
		
		$("a").slideUp();
		  
	});
</script>

The first line adds the jQuery script library. The main script area is inside a piece of code that looks like this: $(document).ready(function(){}); This basically tells your browser to execute everything inside when it hits the page. So in our case we're giving it the command:


		$("a").slideUp();

This says find everything that is an <a> and execute slideUp() on it. Or in other words: find all the links and make them vanish with a sliding up effect. Try adding that script to a page and load it and you'll see all your links vanish. Pretty neat huh?

Anyhow there are loads of ways to select things, and you can read about them in the API and documentation. You can do things like find every element with a certain class, a certain id and so on. At some point I'll write a proper introduction to jQuery tutorial here, but for the moment, that tiny intro will do - besides having just an hour of experience with jQuery I suspect it'd be something of a travesty for me to write an intro to it!

Sliding Away with Selectors

So after a little experimentation I came up with a way to use jQuery to make my tabs slide in and out. To do this first I modified my links to not have any javascript, but rather to have a title attribute and an extra class="tab". Notice that you can give an element two classes by doing this: class="tab active".


<ul class="tabs">
    <li><a href="#" title="content_1" class="tab active">Topics</a></li>
    <li><a href="#" title="content_2" class="tab">Archives</a></li>
    <li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>

Now using these two elements, basically I can get all the links with the class 'tab' and I can also find any element whose id equals the title attribute of the link that was just clicked. Here's the script (placed in the <head>) which explains this a bit better:


 <script src="scripts/jquery-1.2.3.min.js"></script>
    <script>
	
	  // When the document loads do everything inside here ...
	  $(document).ready(function(){
		
		// When a link is clicked
		$("a.tab").click(function () {
			
			// switch all tabs off
			$(".active").removeClass("active");
			
			// switch this tab on
			$(this).addClass("active");
			
			// slide all elements with the class 'content' up
			$(".content").slideUp();
			
			// Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.
			var content_show = $(this).attr("title");
			$("#"+content_show).slideDown();
		  
		});
	
	  });
  </script>

So I've added comments in to help explain. Basically when any link with the class 'tab' is clicked, we do everything inside that function.

And to see the final working example with jQuery, click here!

Final Words

OK so a few minutes after making my jQuery example, I discovered that there is in fact a special 'tabs' visual control in jQuery. I'll have to have a play with that tomorrow as no doubt it will make life a lot simpler!

In the meantime I hope you enjoyed the tutorial and got something out of it.

Check out some more great tutorials and articles that you might like

How to Read an RSS Feed With PHP - screencast Screencasts
Create A Tabbed Interface Using jQuery Javascript & AJAX
Tabbed Content using jQuery and WP_Query Wordpress

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )

Shane April 23rd

Where’s the rest of the tutorial?
Shane April 23rd

Never mind, sorry.
Collis Ta'eed April 23rd

Whew, I thought that tutorial would be a quick one … took almost 7 hours!!!

Evidently still getting the hang of web dev tutorials
Collis Ta'eed April 23rd

@Shane: sorry weird wordpress bug chopped off half the tutorial when I was publishing. Fixed now!
Josh Drake April 23rd

Looks great! Very slick design - I love jquery. Thanks for the tut, man!
David April 23rd

This is great - thank you. Am really looking forward to watching this site develop. One quick thing though - the jquery example doesn’t work in Safari (Mac 10.4, Safari 3.1) - it’s a lovely tutorial though, thanks.
Victor April 23rd

Woah, looking cool XD
A nice starting tutorial, keep up the good work : D
Osynovskyy April 23rd

Hm, the sample with jQuery don’t working on Safari ;( but your own script work good
Collis Ta'eed April 23rd

Not working in Safari … d’oh! Damn browsers’ll be the death of me. Thanks guys, I’m gonna figure out what went wrong there!
Josh Drake April 23rd

@Collis: Is it just me, or does this site have some HTML/CSS errors in it? I see link borders around all of the linked images, and I don’t get the right formatting for most of that page. Here’s a link to the screenshot:

http://i75.photobucket.com/albums/i283/dragolux/NetTuts.jpg

I’m using FireFox (2.0.0.14) on Windows XP. Is it my problem or yours?
Josh Drake April 23rd

@Collis: Is it just me, or does this site have some HTML/CSS errors in it? I see link borders around all of the linked images, and I don’t get the right formatting for most of the pages. I’m using FireFox (2.0.0.14) on Windows XP. Is it my problem or yours?
Collis Ta'eed April 23rd

Hey Josh, you mean the NETTUTS site? Or do you mean the site in the tutorial?

I’m using Firefox too, though on a Mac laptop as I gave up my trusty win pc a couple months ago. Things seem OK, but I wouldn’t say it’s not got problems

Collis Ta'eed April 23rd

jQuery code fixed for Safari …

For some reason Safari didn’t like this code:

// switch all tabs off
$(".active").removeClass("active");

// switch this tab on
$(this).addClass("active");

But doesn’t mind this code:

// switch all tabs with the class 'active' off
$(".active").attr({ class: "tab" });

// switch *this* tab to have the 'active' class
$(this).attr({class:"tab active"});

Browser compatibilities … what can you do eh

Phyo April 23rd

Very nice tutorial indeed!

Thanks.

Collis, you could show us how the links can act like image (boxes) like you designed on freelanceswitch site under “Best of Freelanceswitch” tabbed content so that users can just mouse-over it and they can select it rather than select on just text links.

Just getting greedy. heee….
Adam April 23rd

Nice one Collis, helping me get the hang of javascript / jQuery a little now
lawton chiles April 23rd

Collis, any chance at seeing that re-done aweber tutorial?
TheWind April 23rd

NetTuts.com is starting fast and great ! thanks !
Constantin Potorac April 23rd

Waw… great one Collis. Thank you.
Zach April 23rd

hey collis,

great first tut. i mysefl am just getting into javascript and jquery. i await the update on using the ‘tabs’ visual control to see what that can create.

also, just me being nitpicky, the animation of the tabs coming up/down when clicked upon seems a little off. im not sure what’s causing it, but it just doesn’t seem smooth. dont kno how to fix it, just thought i’d point it out. XD
Danny April 23rd

I like the jquery explanations and DOM explanations here, very very helpful. I love using jquery myself, one of the best javascript things out there
Matt Polito April 23rd

I was just about to create something like this… now I have your help. Thanks!
GeminiArt April 23rd

wow ….. really cooll … great work man

thx for all
Tom April 23rd

Very nice and detailed tutorial, keep up the good job!

On Firefox - Win XP I don’t like the 1px border below the tabs. With a margin-bottom: 5px on ul.tabs it works fine.
Whitney April 23rd

Awesome - I have learned a ton from the PSDtuts site and am really looking forward to learning more here. Fascinating stuff!!

Thanks for all your hard work.
Harry April 23rd

Looks goooood but whens the plus membership coming out
shiva April 23rd

Yes. Great job.
giackop April 23rd

thanx collis.. long and detailed tutorial thanx
Mike April 23rd

This is nice, but I do have one concern. It doesn’t degrade gracefully if the user’s browser does not have Javascript enabled. In my opinion, everything should work as expected without Javascript…just at a less “cool” level. Nevertheless, jQuery is an awesome platform. I have come to love it while building many Drupal sites.
arnaud April 23rd

Very nice detailed tutorial
Tyrone Avnit April 23rd

These tutorials are really exciting and I cant wait for more
landon April 23rd

I can’t wait to see more tuts. Thank you guys for existing. seriously.

I hope this is the caliber of tut to expect.
Mihai April 23rd

Thx for the delails
Marcus April 23rd

Great tutorial, but I found a typo in step #6.

It reads:

#tabbed_box {
margin: 0px auto 0px auto;
width:300px;
}

it should be

#tabbed_box_1 {
margin: 0px auto 0px auto;
width:300px;
}

Keep up the good work!
Bob April 23rd

Finally some excellent tutorials to make the web function and look as good as PSDTUTS makes graphic design look great!

cheers!
Josh Drake April 23rd

@Collis: I guess it’s just my PC. I tried it in Safari, and it works fine. Oh well…
Mark Bowen April 23rd

Excellent tutorial. I am currently learning jQuery and being able to do these kinds of things with sites can really knock the socks off the competition nowadays.

Perhaps as a second part to this tutorial you could look at what to do with the tab links if someone doesn’t have JS enabled

Great tutorial though, well done. Nice to see someone who has a thorough knowledge of CSS and code structure too. Too often I see people getting lost as they haven’t thought out the structure before diving in and just add classes and ids to absolutely everything where they could have (or more importantly should have) just used a readily available html element to do the job!

Best wishes,

Mark
Denzyl April 23rd

Awesome explanations! I can’t wait for your Wordpress book.
D. Carreira April 23rd

Thanks for another great tutorial!

David Carreira
David April 23rd

Awesome! I can’t wait to give this a try!
Robin April 23rd

Hehe, yeah, unlike the psdtuts site, this one is going to differ in the fact that we are going to run across browser incompatibilities. I would care about Safari as much was it not for the iPhone. Oh well. Luckily we don’t have that problem with Photoshop!!!

Good job on the tutorial as always Collis.
Ben Griffiths April 23rd

Simple, thorough, and a good looking end result, thanks!
David April 23rd

great this page, the little sister from psdtuts > good start, very good!
more more more pls!!!!
Zane April 23rd

I’m looking for something like this as I’m trying to squeeze like 45 links per category in an area of like 300×400 so it can be a fixed div, the only thing is does the whole document have to be loaded for this to work? That is the problem for what I’m currently using
Evan April 23rd

OH NO! one more website to be addicted to! NETTUTS FTW!
Michael Castilla April 23rd

JQuery rules. Good use of DOM and a nice design. Thanks for the in-depth tutorial!
Snorri3D April 23rd

great tutorial Collins thanks alot.

rely good intro into JavaScript and jQuery nice and simple i liked it alot.
and realy nice tips and tricks for the css part with that last child trick and stuff like that.

keep it up
hv-designs April 23rd

nice space saving menu, might have ago and incorperate it into my site.

thx for the tutorial

keep up the good work, and congrats on the launch of the new site
MisurA April 23rd

The jQuery example is bit glitchy in IE7 with the links popping out of the bottom when in transition hey? Hopefully these tutorials won’t be just tested in one browser and then posted.

I am LOVING the idea of this site as PSDTuts was such a success but if stuff doesn’t work in all browsers it isn’t worth it.
Matt Radel April 23rd

Great tut - I’ve been looking for a good one on this topic for awhile now!

The only potential hole (that I can see) is that it doesn’t degrade very well for folks who have JS disabled. Granted, that’s a very small percentage of users, but worth giving some thought to.

Great work - keep it up!
Patrik April 23rd

Using Jpeg’s for graphics? That’s when I stopped reading!
tenfoot April 23rd

wonderful tut.

looking forward to how this develops.
Shane April 23rd

Fantastic tutorial Collis. I’ve used Prototype/Scriptaculous for a while, but I’ve only been using JQuery for about a month. It’s a fantastic framework that empowers you as a developer and a designer.

Fantastic work and promotion! Thanks.
Nico April 23rd

Superb! I’m just learning how to incorporate jQuery and this helps a ton! Thank you so much!
Lamin Barrow April 23rd

This is great.. now you are talking.
Sumesh April 23rd

Nice tutorial. I’ve personally been using DOMTabs, but was looking for something more optimized (I’m an optimization freak, to say the least,and large scripts like domtabs isn’t exactly good).

A couple of thoughts, Collis:
1) Though jQuery looks slick, I hope you promote your home-brewed script more. jQuery isn’t as small, and for a task as trivial as tabbing, we shouldn’t be having 10+KB scripts.

2) I scanned FSw’s source a couple of months back to see what tabbing script you were using, and surprise, a similar script turns up here. Good job.

So you’re a designer, Photoshopper, coder, web dev, writer and businessman. What next?
Johan April 23rd

You teached me something there. Thanks!
Bruce Alrighty April 23rd

Great job.
I have been wanting to learn more about JQuery for some time now.
Razvan April 23rd

Awesome tut, thanks a lot!
HipHopMakers April 23rd

Great post. I’m subscribing the the feed now.
Christian Mejia April 23rd

Collis,

My brain is spinning at 7200rpm with this tutorial, but I am very grateful for the existence of Nettuts and PSDtuts. I will study these sites like a bible! I will also give in to the membership fee because I WANT MORE!!!

Cheers,
Christian
Nate April 23rd

Now this should be fun. It will be my first look at JQuery
Marianne April 23rd

Great work! I’m looking forward to see more great tutorials as I’m already addicted to PSDTUTS.
Joefrey Mahusay April 23rd

Wow great tutorial collis. Two Thumbs Up!
Qbrushes April 23rd

farout man.. this is too good to be true!
Chris Laskey April 23rd

Glad to see nettuts up and running, congrats on the new baby Collis!

As for jQuery, don’t forget the amazing power of jQuery selectors! jQuery allows you to crawl up and down the DOM without passing variables through title attributes. Not only does it turn two lines of code into one (since there’s no need to assign variables), it prevents those unsightly info boxes when you mouse over something with a title attribute.

Use $(this).parents(’.class>div>#etc’) to climb up the DOM.
Use $(this).children(’.class’) to climb down the DOM.
Or combine them both to go up high enough, then descend down a different branch, $(this).parents(”).children(”).slideDown(”); etc.

In this particular case, the HTML structure isn’t ideal for crawling the DOM, since the navigation is separate from each of the content divs. But in general once you start using jQuery’s powerful selector tools more, you’ll never want to go back to passing attributes via titles!

Cheers,
Zinbiel April 23rd

This is excellent!
Thank you Collis.
Aminur Rahman [aka Tom R] April 23rd

nice and sleek, i am having trouble to see the end result though.
Qbrushes April 23rd

ok i’m abit stuck now.. still trying though… Collis you really need a forum going on to complete this community
Saswata April 23rd

Collis u r doing a wonderful job. I will point out a thing to make it more wonderful.
when I press “copy to clipboard”, I get html version of special characters in the code, e.g. < for <
I would suggest you upload the content in html as it is (there is a tag for this which I forgot). That will help.
Saswata April 23rd

i meant & l t ; for <
chandan April 23rd

Awesome
Zach April 23rd

Hey just thought I’d add to this awesome little tutorial. When using javascript you always get those annoying little lines around links you’ve clicked, and the persist which really takes away from your design. Well with jQuery it’s a simple as this:
Andrei Constantin April 23rd

damn i was looking for a tut like this. I’ve been using jquery for quite some time now and maybe i should try writing some sweet slick tutorials for you guys
Daniel April 24th

really a nice and detailed tutorial ! thank you very much.
barat April 24th

Verry nice, but:

1) Looks different on IE 6.0, Firefox 2 and Opera 9. Final result looks perfect only in Opera, In IE and Firefox there are display bugs which make this tabs looks not as good as in Opera

http://img176.imageshack.us/img176/1690/psdtytsmz4.png

2) jQuery works wierd on Opera… it switches then go back to home

3) There is no such thing as 0px. Zero is always Zero … no pixels (px), no inches (in), no points (pt) … just Zero … border:0; font-size:0; margin:0; …
Qbrushes April 24th

Solved my problem awesome outcome!
webdemar April 24th

Hey Collis,

excellent tutorial! It is worth every single minute of these 7 hours
Franck April 24th

Nice one.

Obviously the HTML could be improved in order to degrade gracefully :
using href=”#content1″ and so on would be a simple upgrade to start with.
aazeede April 24th

oh god… high quality tutorial, and this is just the second one! This is looking so damn nice!
Marvin O. Hassan April 24th

Great tutorial. Really inspires me to redesign a few things.
markus April 24th

Hey!
Great tut! And great page! Very useful
Thanks!
james April 24th

how about doing a horizontal one? that’d be great!
Travis April 24th

Excellent tutorial Collis.

But there’s one problem with your last jQuery example. When you click any of the navigation links, something is causing it to treat the link as an anchor for the top of the page. If you shrink the height of your browser or move the tabbed box down in the page you’ll see what I mean.

This is a big issue if you’re using the tabbed box in the sidebar lower on your page, footer, etc… It’ll jump to the top of the page when a nav link is clicked.

I’m new to jQuery, so I’m not sure what’s causing that, or how to fix it, but thought I’d point it out so you or one of the readers can apply a quick fix.
kailoon April 24th

Wow! this is very useful. However, I use savvy.ui which developed by my friend however, JQuery still very useful for web designer. Tabbing is definitely powerful for web development. Nice tutorial!
Ty April 24th

The demo tabs panel looks great, works great.

One small thing in firefox you see outlines on the bottom of the selected and active tab.
A fix is adding this to the css some

FlashDen	Flash Components
AudioJungle	Music Loops & Sound Effects
ThemeForest	Site Templates & Themes

PSDTUTS	Photoshop Tutorials
VECTORTUTS	Illustrator Tutorials
AUDIOTUTS	Music & Sound Tutorials
NETTUTS	Web Development Tutorials

FreelanceSwitch	Freelance Advice
Creattica Daily	Creative News
Jobs.FSW	Freelance Jobs
FaveUp	Design Inspiration
Envato	About Us