Create a Slick Tabbed Content Area using CSS & jQuery

on Apr 23rd 2008 with 425 comments
Tutorial Details
  • Technology: jQuery, CSS
  • Difficulty: Intermediate
  • Completion Time: 1-2 hours

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.

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:

  1. 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.
  2. Then we’ll have the heading area, probably with a <h> tag
  3. 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.
  4. 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.
  5. 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:

  1. 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!
  2. 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.
  3. 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:

  1. 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.
  2. 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.
  3. I’ve given the links and content areas id’s because we need to use Javascript to manipulate them later.
  4. 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:

  1. 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.
  2. 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.
  3. 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!
  4. 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.
  5. 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:

  1. 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.
  2. 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.
  3. 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:

  1. Once again we’ve removed the bullet points off the <li> elements with list-style:none.
  2. 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.
  3. 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:

  1. <a href="" id="tab_1" class="active">
  2. <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.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

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

Plus Premium
 
 
Add Comment

Discussion 425 Comments

Comment Page 7 of 8 1 ... 5 6 7 8
  1. Christian V. says:
    September 30, 2010 at 6:23 am

    thanks for the tutorial..

    Reply
  2. Alva Donna says:
    October 7, 2010 at 3:58 am

    a {
    outline: 0;
    }

    will remove the dotted focus links after click on tabs…

    Reply
  3. Bruno Monteiro says:
    October 15, 2010 at 2:43 pm

    Awesome. Congratulations. :)
    Any chance of a auto-slide?

    Reply
  4. Chris says:
    October 25, 2010 at 9:54 am

    Hi,

    Nice tutorials. So, some people wants to add more than one “slick tabbed content” (like me) in the same page. I tried many solutions to add more slick tabbed, but it doesn’t works

    Can you help me ?

    Chris

    Reply
    • Amar says:
      December 21, 2010 at 2:35 am

      Hi, did you manage to get more them on tabbed content? i added two tab content and changed the content_1 id, but it didnt work well. did you have a solution?

      Reply
  5. D0nny says:
    October 30, 2010 at 5:23 am

    I followed this tutorial down to step 14 (didn’t do the images on the tabs) and it doesn’t work.
    I even found the links to the demo’s don’t work (I’m using Chrome on Windows).
    If you use the link under the ‘Styled’ section, the tabs don’t work!

    Or am I really missing something here!?

    Reply
  6. leon says:
    November 7, 2010 at 5:01 pm

    Nice tutorial…

    I added this piece of script to load a specific tab from the hash in the url, defaulting to “content_1″ if no hash exists.

    //initiate tab depending on hash tag
    var loadContent = “#content_1″;

    if( window.location.hash != “”){
    loadContent = window.location.hash;

    }

    var title = loadContent.substring(1);

    $(“.content”).hide();
    $(loadContent).show();

    $(“a.tab[title="+title+"]“).addClass(“active”);

    Reply
  7. Dazy says:
    November 9, 2010 at 10:47 am

    Hi,

    Thanks for this nice tutorial. I have created a menu using second “More Complex” script without animation.

    But when I click on any tab, I get following error-

    document.getElementById(content_prefix + i) is null
    [Break on this error] document.getElementById(content_prefix+i).style.display = ‘none’;

    and in some other case I get this error-

    document.getElementById(tab_prefix + i) is null
    [Break on this error] document.getElementById(content_prefix+i).style.display = ‘none’;

    Please!!! Can anyone let me know why I’m getting these errors?

    Thanks in advance-

    Regards,
    Dazy

    Reply
  8. twitter says:
    November 10, 2010 at 4:53 pm

    perfc thank!!

    Reply
  9. dimlight says:
    November 12, 2010 at 8:41 am

    dude! when i create my own own link instead of sharp, the script does not work properly, it retrieve the same content. the first content… :(

    Reply
  10. sr_bryant says:
    November 27, 2010 at 7:49 pm

    Great tutorial….thanks so much.

    Reply
  11. Bruno Lopes says:
    November 30, 2010 at 3:50 am

    Hi, Ive loved you tutorial! It is awesome, but I wonder, can I put a database table inside a tab? Thank you so much.

    Reply
  12. binary says:
    December 4, 2010 at 5:51 am

    Is it possible to replace the gradient background with CSS styled gradient?
    But I guess not all browser support CSS gradient.. :(

    Reply
  13. matelas says:
    December 15, 2010 at 2:53 am

    i have similiar question like bruno, can you make additional tutorial how to put database table inside a tab?
    thanks

    Reply
  14. BM'r says:
    December 23, 2010 at 8:48 am

    I implemented this code beautifully as it is written, however, when I changed the tabs to new, longer titles, there are borders around were the original tab was. How do I remove these black borders? I have scanned the CSS documents and can’t find the settings. I have a screenshot, but unable to add it in the comments.

    Reply
  15. BM'r says:
    December 23, 2010 at 9:17 am

    Please disregard my question about changing the title text of the tab. Thanks.

    Reply
  16. prokhall says:
    December 28, 2010 at 8:53 pm

    Thank you. It’s good story reviews.

    Reply
  17. kimnows says:
    December 31, 2010 at 10:36 am

    yeb ‘s so cool.

    Reply
  18. chopal says:
    December 31, 2010 at 12:26 pm

    There are good new story. I like its.

    Reply
  19. raj says:
    January 12, 2011 at 9:49 pm

    hi, i am new to jquery, i got a doubt if i wan to go straight away go to 2nd tab what should i do. please get me the answer as soon as possible .Thanks

    Reply
  20. ashkan says:
    January 17, 2011 at 5:20 am

    thanx, very nice !

    Reply
  21. Ashley says:
    January 17, 2011 at 8:00 am

    I have modded this to suit my own needs and now have 6 tabs instead of 3.

    When I first load up the page it will display on the first tab – the contents of the first tab and then the content of the next three tabs below that.

    Any ideas why?

    Reply
  22. ajith says:
    January 24, 2011 at 5:21 am

    GREAT TUTORIAL…GREAT WORK.LOVE THOSE COMMENTS ALSO

    Reply
  23. Bledar Ramo says:
    January 26, 2011 at 5:14 pm

    Hi, Ive loved you tutorial! I have created similiar totorial post for wordpress and thesis .

    I wonder, can I put my tutorial at net.tutsplus.com

    tutorial link : http://www.ramoservice.com/thesis-themes/add-a-tabbed-widget-in-your-thesis/

    Thank you

    Reply
  24. MM says:
    February 2, 2011 at 6:17 pm

    Hey Guys,

    Plz copy the HTML file from tutorial itself coz i dont know but code I have posted is all messed up for HTML only.

    Not use to with all this posting comment stuff.

    >MM

    Reply
  25. Gary says:
    February 11, 2011 at 7:57 am

    Question:
    I would like to select a tab through jquery and not a mouse click, kind of an auto selection based on the result gathered in the 1st tab

    so far I have

    $(“ul.tabs li”).removeClass(“active”); //Remove any “active” class
    $(“.tab_content”).hide(); //Hide all content
    $(“ul.tabs li:#tab4″).addClass(“active”).show(); //Activate first tab
    $(“.tab_content:#tab4″).show(); //Show first tab content

    but it doesnt show the tab as active, everything on the page shows, except the tab is inactive instead of active

    any suggestions?

    ps this is great

    Reply
  26. palsoft says:
    February 18, 2011 at 1:10 am

    Very nice jquary …hey continue this work nice job.

    Reply
  27. Mare says:
    March 15, 2011 at 7:12 am

    great tutorial, I’ll use it on my new web site

    Reply
  28. HTML Codes Dude says:
    March 16, 2011 at 2:32 pm

    Just come across this tutorial. the design is just what I’m after for my new project thanks.

    Reply
  29. Maikel Nijmeijer says:
    March 20, 2011 at 6:56 am

    Hi,

    Such a great tutorial. Thanks for this!

    Best regards,

    Maikel Nijmeijer
    Holland

    Reply
  30. kućni ljubimci says:
    March 23, 2011 at 1:44 pm

    Thank you so much!

    Reply
  31. Mohammed says:
    March 27, 2011 at 7:57 am

    This is by far the easiest and comprehensive step-by-step tutorial I have ever seen for one of the best scripts on the web. Thank you!

    Reply
  32. DC Web Design says:
    March 30, 2011 at 10:04 am

    This is the fifth time I am coming to follow up this tutorial and I think its time to thanks right.
    Thank you Nettuts

    Reply
  33. keyuri says:
    April 11, 2011 at 11:54 pm

    nice example

    thanks for sharing

    Reply
  34. jigolo says:
    April 15, 2011 at 2:30 pm

    I did the programming menu tab sites use this expression has been a very successful thank you very much.

    Reply
  35. Hrana za pse says:
    April 18, 2011 at 2:55 pm

    Very nice, thanks for sharing!

    Reply
  36. kankaro says:
    April 19, 2011 at 6:28 pm

    there’s a fancy error on the css when you open it in IE…

    Reply
  37. Gareth says:
    April 26, 2011 at 5:08 am

    It is better practice to not hide the tab content areas via CSS or inline styles – If someone hits your page with JavaScript disabled, you are limiting their visible content.

    It will be better to hide all tab content via JavaScript, then if disabled, all content areas are then visible.

    Reply
  38. LK Web Designs says:
    May 5, 2011 at 3:30 am

    erm not sure what i have done but its not working for me looks the same but when i click a tab it doesnt switch and the new content doesnt slide up, it moves up a tad then drops down… if i click fast enough i can see the content_2 tab what a tease!

    Any idea what I am missing? I have followed it word to word

    Reply
  39. Adeel says:
    May 6, 2011 at 2:16 am

    Hey
    I have completed all the coding but when i refresh the page 3 tabs data shown but when i switch tabs everything working fine……everytime i refresh the page all the data in tabs shown on first page…i had increased the number of tabs as well and make some changes in JS as well but problem still persist.

    Reply
  40. Steve says:
    May 8, 2011 at 4:53 am

    The classes/divs aren’t defines right in the style sheet… Divs are called out as classes and some classes are called out as divs and some aren’t even named right ..

    Reply
  41. olivet says:
    May 11, 2011 at 2:39 pm

    this JQuery please software i need to install before i can use the scripts?

    Reply
  42. Adriana says:
    May 15, 2011 at 5:44 am

    Hi

    Nice … i will use this on my website

    Thanks

    Reply
  43. Kontaktne Leće says:
    May 31, 2011 at 2:16 am

    this was what i need thanks:)

    Reply
  44. Sizzler says:
    June 22, 2011 at 10:37 pm

    Great design, great piece of code! Thanks man

    Reply
  45. طراحی سایت says:
    June 25, 2011 at 9:35 pm

    powerful design, Thanks for your Blog
    Only tutsplus

    Reply
  46. JJ says:
    June 30, 2011 at 8:59 am

    This works in all browsers but not IE7 and IE8. Anyone else have this problem?

    Reply
  47. Simon says:
    July 3, 2011 at 9:04 am

    Brilliant tutorial and tab design.

    Question – how can I keep state on the tabs when a user refreshes the page.
    If user is on Tab4 and refreshed the page can I keep the user on Tab 4 (or whatever tab hes on).

    This would be very useful.

    Reply
  48. Proverbes Marocains says:
    July 8, 2011 at 2:39 am

    thank you very much for this great tutorial

    Reply
  49. Pablo Andres Gracia Rocha says:
    July 16, 2011 at 8:54 am

    Excellent! I loved the way you explained it, it really good for beginners like me! Thanks!

    Reply
  50. masal says:
    July 18, 2011 at 1:54 am

    thank you very much for this great tutorial

    Reply
Comment Page 7 of 8 1 ... 5 6 7 8

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.