Create a Slick Tabbed Content Area using CSS & jQuery
Apr 23rd in HTML & CSS by Collis Ta'eed
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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
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
( )Professional Website Designer November 4th
Took me only 20 minutes. I just downloaded the demo page and made a few changes. lol. I’m such a stinker
( )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.
( )Darren Taylor June 8th
Excellent plugin but I agree with Mike and Dev, the example should degrade gracefully, with JS disabled this just doesn’t work. It should be mandatory that all scripts are unobtrusive.
( )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 someplace (you could specify the div id, but it’s good practice to just use it throughout sometimes, so as to not see the usually unintended outline dotted lines):
a:active { outline: none; }
A full article write-up on this is here:
( )http://sonspring.com/journal/removing-dotted-links.
Anytime you use an image background in Firefox you will get this active selected browser behavior.
Marv April 24th
excellent description, although my english is not the best.
( )thanks!
Ty April 24th
Running a test, I’m not sure the CSS I just mentioned did fix the outline beneath the active tab.
Another thing was when the scrollbar appeared if the tab panel was a bit longer for some tabs the appearance of the scrollbar makes the tab panel box jump around left to right.
( )There’s an easy fix for that:
html {
overflow-y: scroll;
}
With the overflow-y: scroll; method all you get is the space of the scroll bar appearing instead of a constant scroll bar, but the space is always reserved and a constant width.
Action discrète April 24th
Really cool website. This one may receive my tutorials soon I hope
( )Cheers
FlashRipper April 24th
Very, nice!
( )Maicon April 24th
I’ll come back =)
( )Darek April 24th
When viewing the result in Firefox 3, the bottom border on the active tab goes all the way from the left to the right, creating a tiny gap on the sides where the tab meets the content area. The bottom margin is also slightly off. I really want to know a way to make this look right in Firefox as well as safari and the rest.
( )will April 24th
If you take the padding off the element that is being resized you’ll find that the animation is a lot smoother. This is because jquery decreases the height of the element and then simply removes the padding. So if you have 20px (total on an axis) padding your animation will jump the last 20px.
just add another div and put padding on that, or put padding on the content.
(borders have the same effect)
Will
Engage Interactive – Harrogate web design
( )Mattb April 24th
Excellent Tutorial Collis. Love the new site, I looking foreward to learning new web dev skills.
( )Erika April 24th
You guys just keep getting better and better!
( )Nico April 24th
Just finished! Great tutorial – you really put a lot of work into this! Thank you! Took me forever to figure out how to fix the bottom border problem of the tabs in IE but dummy mistake on my part
This new site is sweet!
( )Cain April 24th
Thank you sooo much!
That content box is going to look sweet on my site.
( )Rijalul Fikri April 24th
Wow, another great tuts as usual. I love psdtuts, and I started to love this site too. Looking forward for your next tutorial. Thank you very much for the great tutorials
( )crystal geng April 24th
I’m pretty new to the net so I haven’t done anything of what you’ve said yet, too nervous and don’t want to screw it up. I have to take my time, so it’ll be more like 17 hours for me to do this. If you can can someone get back to me and tell me if this is how you do a web page? I thought it is but I’m not sure. I’ m not stupid I just want to make sure. I don’t know if I’m allowed to ask for help more than what you showed by the tutorial, I just thought I’d try. Thanks, and I’m looking foward to trying this even if I don’t get any feedback. Crystal, Reno NV
( )crystal geng April 24th
Sorry for the screw up of the sentence, “If you someone could get back to me”. I was typing too fast and didn’t check for mistakes. Sorry.
( )Crystal, Reno NV
BrianMichael April 24th
The first 2 tuts and I want MORE! I was just thinking to suggest how great it would be for a centralized dreamweaver/web tutorial site with modern & trendy techniques!! Keep it UP
NETTUTS PLUS!!!!!!!!!!
( )Ali April 25th
I just realised ill be on this site more often than Psdtuts.com, this is a very good site, with neat tutorials
( )Radek Mackowiak April 25th
That’s a very nice tutorial.
( )alex April 25th
Great tutorial, I’ll try it for myself in my blog navigation maybe!
Keep it up,
( )Dugg/Thumbed Up
dev April 25th
nice tutorial !
one thing though this doesn’t degrade well when javascript is turned off. Would really appreciate an unobtrusive example of the tutorial.
( )Brandon April 25th
Great tut and promising site! I will frequent this space!
( )Muzicar April 25th
This looks great! It’s that easy… Wonderful! Thanks for sharing!
( )Geoserv April 25th
STUMBLED!
Fantastic tutorial. Thanks for sharing.
VOTED for this tutorial at:
( )http://www.newsdots.com/tutorials/create-a-slick-tabbed-content-area-using-css-jquery/
Codered April 26th
IE and Firefox display it in diferrent way so i think we can fix ul.tabs as this :
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:5px; /* This one for Firefox */
*margin-bottom:6px; /* This one for IE */
}
( )The Fatman April 26th
Great tut cheers, easy to understand for the average bloke.
( )Adam Griffiths April 26th
This is a brilliant tutorial Collis, thanks!!
Just one thing, it took 7 hours to write, and about 30 to read and go through without copying the code and testing it out for myself. I know it’s the style of things but for something as “simple” (although not too simple) as a tabbed box, it is a really long tutorial to be reading. Just my two cents.
Although there are some cool tricks I learned in this tutorial, like the last-child styling in CSS, and a cool intro to jQuery, although my preference would be mootools.
Thanks.
Keep ‘em coming!!
( )Brian April 26th
Example doesn’t work for me with Firefox 2.0.0.14 on Mac OSX 10.3.9
( )Raj Dah April 26th
Amazing tutorial. I’m looking forward to this site’s growth. Might even have a few tutorials + screencasts for you
( )N Avery April 27th
Certainly looks nice, but the vertical transition is a bit jittery (Firefox 3b5 / Ubuntu Gutsy) and a horizontal transition would make more sense, if you’re going one tab to the right, that’s where the new information should slide from. The box would have to change in vertical size beforehand, though.
Having said that, this website looks fantastic, and I hope to follow it as it grows =]
( )Matt April 27th
“Using Jpeg’s for graphics? That’s when I stopped reading!”
You’re kidding right?
Still using 500 gifs for your tables?
Good walk through.
( )firman April 28th
Thank you so much. After the PSDTUTS and now NETTUTS.. this is awesome!! I do appreciated for what are you people doing..oh, sorry for my bad english. English is not my mother tounge
( )Sarah Neuber April 28th
Thank you, thank you, thank you!!
( )Just tried it out on my website and it looks great!
Pleeeeease more jQuery tuts!!!
Kai Richard König April 28th
could you please highlight those html-code-blocks and for more readability syntax-highlighting would be great.
greetz
( )Daniel Richard April 28th
Heya great tut there! I checked out the Final Words part, and although it was linked to a tabs feature we can use with jquery, I realized that its under the UI section. If I’m not wrong, you still got to download the plugin thingy (or ui.tabs.js file) from there.
Yours would be a pure jquery w/o addons version of the tabs tutorial.
( )Phil April 29th
Great tut
( )But with the jquery example if you click on the active tab it slides up and down …
Ben April 29th
Hey,
( )Great stuff! you guys are by far the best site i’ve found.
Just getting into all this, so this may seem like a really simple question to you guys, but what’s the difference in preceeding ids or classes on the css sheet with a “#” vs a “.”? I’ve found it makes a difference… just don’t know why that is!
Cheers,
Ben
Ben April 29th
Never mind… just answered that myself. # is an id, and . is a class right?
( )siddu April 29th
nice tutorial great
( )ijajaja April 30th
…tuts.com’s families always do the best job!!! Awesome tutorial!!! thanks
( )neway April 30th
It’s very great,good job!!
( )Noam Smadja April 30th
Since we keep using the same font in all this tutorial i wanted to just keep it in the body style else then adding it again and again in every new style i add… doing so, putting font-family attribute in the body style fixed the 1px gap between the tabs and the content. i dont realy understand why… but it did…
( )Noam Smadja April 30th
@myself just one message above.
the 1 px gap problem with firefox which was spoken…
( )Matt April 30th
Great tutorial. Very helpful. I’ve always been a little confused by using tabs.
( )Travis McCrea May 1st
If these tuts are going to be any view into what is to come, I know this is going to be the most amazing site ever.
( )A French Fryiend May 2nd
Hello.
I was browsing a digg-like site and i found a frenchwritten site (could be canadian) with the exact same tutorial. It is translated in french but it is the same.
Here is the direct link :
http://www.pckult.net/tutoriaux/27-css/1221-creer-une-boite-donglet-a-la-mode-web-20-avec-css-et-jquery-partie-1
The copyright law is very clear and strict in France, it can be compared to the one in USA i guess : it’s forbidden to copy (and translating is copying) without the author go. The technical word is “contrefaçon”.
Hope it helps. Keep up the good work.
( )Stenkoo May 2nd
nice tuts!
I tweaked it a little using scriptaculous libraries, You can see result here : http://www.stenkoo.com/labs/mini
thanks PSDtuts and now NETtuts for all theses great tutorials!
( )Rata May 3rd
Even I got most of it …
Conclusion: good work 
Thank you.
Kind regards
( )Rata
Stenkoo May 3rd
i leaved a comment on pckult, asking them to give credits and source link to nettuts tutorial for there french translation. it’s done.
( )Charity May 5th
I’ve been using tabbed interfaces for a while now and this is one of the better tuts I’ve seen on how to actually create one. Well done. Best tip I got out of it though… the last-child pseudo selector mentioned in step #14. Never knew about that one! It’s the little details like that which can add up to make a big difference. Good stuff.
( )Web Design Denver May 5th
Great tutorial… The final product is slick!
( )Ryan May 5th
Looks pretty good, but sorry it wont get my vote until it degrades gracefully without Javascript. There’s really no need to block users from seeing content like this just because they don’t have JS enabled.
( )Björn May 7th
Doesn’t work if you have js shut off. So I wouldn’t recomend anyone actually using it for more then learning purposes. Anyways, it’s a well written tutorial but the technic isn’t perfect
( )Helmy May 7th
Yes, thats a very good jquery tutorial, deep and details. I might think to contribute also
( )Pedro Rogério May 13th
Very nice good man. Congratulations!!!!!!
( )JD May 13th
Wow long but good!
( )I’ll have to try it out!
SARAH May 14th
Great tutorial.
( )Raj May 16th
very nice tutorial.. Thanx Collis.
( )D. Carreira May 17th
For who wants to use a nice effect like in the Panic website, take a look: http://creativepony.com/demos/sliding-tabs/
David Carreira
( )Pablo May 17th
nice tutorial!
( )A.Niraj Kumar - India May 19th
Thank u very very much Bro…
( )Jad May 19th
Thank you for this tutorial
( )Haz May 23rd
Hey, that’s really nice, but I have one problem I don’t know how to solve – and I hope you’ll help me.
So: when I refresh the page and have for example second tab selected, after refreshing there is first one selected. Is there any way to make it remember which tab was selected by user and select it automatically after refreshing the page? I really need it this way and I’m completely green on javascript.
( )Mitch May 26th
Its really great tutorial, but there is a transition problem with IE7, the new contents divs appear while they are sliding up. Any fix for that?
( )Mohodin Rageh June 7th
Woow. what a great tutorial. Your talent oozes out plentifully. I like the step by step approach you took in doing it to make sure that everybody understands how it should be done correctly, and more impotantly, cross-browserly(I hereby copyright the word cross-browserly:-))
Thank you
( )Alex June 10th
Fantastic, really useful and clear in exposure.
( )I’ll post in my blog
Danhbaweb20.com June 13th
Thanks ! Great blog for designer
( )allen June 25th
I like the tabs, but i was wondering how i add it along side with jquery lightbox? I can’t seem to get both running the same time.
( )Profesional Web design July 8th
Great tutorial. Thanks for you post. Very useful tutorial.
( )Taylor Satula July 14th
Theres alotta comments
( )cool but i like the coda effect more
Mark Roberts July 15th
Great tutorial, really helpful for a beginner in the web world. One small error I noticed in step 6, selector is in your code as: #tabbed_box, when I believe it should be #tabbed_box_1.
One small tip I picked up as a beginner is if you set outline:none on all your elements you get rid of that nasty dotted box you get when you click on a link, so it spoil your lovely design
( )MAJ3STIC July 25th
I’m noticing when I implemented this awesome tutorial, everytime I click on a tab it resets the page to the very top, is there a way to fix this issue?
( )MAJ3STIC July 29th
Can anyone help? It would be great if you guys had forums.
( )Fede777 | Geekspot July 30th
Very nice tutorial, how about some Source files to download like the rest of the tuts???
( )badger July 30th
this works great locally, but when I load it on the the server I get the error:
$(”a.tab”) is null
but I have all the id and classes labeled right.
????
p.s. I am using this a long with Wordpress 2.6
( )mahmud August 5th
thatz a very good article . It’s very easy and simple. thanx for such tut..
( )Erik August 6th
Source files in a nice zippy file? I hate type, copy, paste.
( )Buzzlair August 8th
I saw the same concept used in phatfusion. The tabbed DIV using Mootools library. Still desciding which library i should use.
( )üzeyir özkol August 11th
Thank you!
( )K_Ace August 13th
Hi I had one question, does anyone know how to disable the tabs and enable them on a button click etc? What I mean is I wanted to use these tabs because they are very cool but I need functionality to actually disable them until the user, say clicks a button or uploads a file etc, whatever I may have in the tab.
Please help, I am using this with asp.net 1.0 framework
Great tabs and tutorial, I actually implemented them already in my code but needed that added functionality of the enable and disable of tabs if anyone can help me. Thank You in advance!
Thanks!
( )Emmanuel August 13th
Hy,
Interresting tutorial. But, i don’t know if i’m the only one in this case, but example page does not work. A complete tutorial for nothing… uhhgh.
And, question : as many other tabbers : what if js is disabbled ? as many other, no access to content. Wrong way. You always try to make it “beautiful” but forgets that a website need to be accessible first.
Anyway, good work.
( )Rhett September 3rd
One peculiarity, or issue that I have with this is with the use of the #! When you click the link in the tab it makes the content scroll down to the content area. That’s because the browser recognizes this as a named anchor. And yes, some browsers treat the id attribute on divs and elements (other than the just ‘a’ element), as anchors. I fixed this behavior by adding the following line at the end of the jQuery script:
return false;
Note: this can also affect the behavior of your browser’s back button. The only problem then is that your page url does not update. I am interested to find out if anyone else has had to deal with these issues – the only thing I have left to resolve now is being able to activate a selected tab when I first load the page. Such as
http://www.mysite.com/mypage.html#content_3
Solutions?
( )Windows Themes September 4th
I love this, but with jquery I have some incompatibility problems, because I run multiple instance of .js files on my website. Anyway I will try it out
( )K_Ace September 5th
Is there anyway to enable and disable the tabs. For example I want to have steps in each tab so once the first tab (step) is complete then the nenxt tab is activated etc.
Is this possible. Also I am having trouble placing buttons on the inner tabs (2nd 3rd tabs etc) when I click the button on one of these tabs the code does not execute and the ficus is returned to the first tab only functionality on the first tab on click works not on any other tabs, how can I fix this?
By the way these tabs are really nice if you could just provided me witha solution to my above questions that would be perfect. By the way I am using these tabs on an asp.net page (vb.net) Framework 1.0
Thank You,
( )Matt September 9th
Yeah, I would have to agree that if it is not accessible, it is not worth the time to make. Looks nice, but that only gets you so far.
( )arun prahser September 12th
for this i thanks. i got a new horizon working in tabs though css and .js. it was a thrilling experience.
( )Nicole September 16th
THANKS! This is really great!
I was wondering how one would do this with images instead of text, e.g. hover over on images and then selected state when clicked.
I got one of them working on a page with text links, but now that i want to add another one on the same page with image links i can’t seem to get the image on to work.
Any help would be great as jQuery is really cool.
Thanks!
( )zakaria September 16th
Great tutorial Collis. Thanks a lot !!
( )Ted September 20th
Great tutorial, but I’v a problem: width jQuery library included in WordPress it doesn’t work. Do you know why?
( )Twisted September 30th
Beautifully done. The most thorough and comprehensive tutorial I have read in a long, long time. Bravo!
( )vashy October 9th
the anchors pull the page back to the top , this is not practical and actually annoying to the users.
( )sammy October 9th
太精彩了,
( )so perfeactly
Will Fastie October 15th
This is one of the best tutorials I have ever seen on the Web – clear, organized, nicely laid out – with an excellent, orderly progression.
I particularly appreciate the candor. Very few Web writers acknowledge what they don’t know (or even what they can’t be bothered to know, which is entirely fair). Quite refreshing.
Thanks.
( )Will
Baltimore, MD
Hans October 21st
too verbose, which does not help to understand the topic.
jQuery has nothing to do with tabs.
Bascially, there’s only 2 techniques to design horizontal tabs.
li {display: inline}
li {float:left}, a {display:block}
Here uses li {display: inline}. But need to know the influence of whitespace between elements
http://www.pagecolumn.com/webparts/making_tabs_with_CSS.htm
http://www.pagecolumn.com/webparts/js_tabs_in_the_top_bottom_right_left_side.htm
( )Marcellus October 22nd
First of all, very nice tut. Very slick and organized. I just got one problem though with the jquery. For instance, when I click HTML Techniques in Topics, I want the same thing to happen to the content area as when I click a tab. I tried creating a new div id called content_6 and then used the same settings as for the tabs, but it doesn’t seem to load it. Is there a way to fix this? Please help!
Greets,
( )Marcellus
Eray USTA November 10th
This tutorial is wonderfull thanks a lot
( )melsteve November 11th
perfectly awesome. Awesomely perfect tutorial.
( )Joomlapanel November 12th
Best of Tab tutorial and complete guide.
( )Tony Sebastion November 13th
The boder bottom pesudo selector code is not working in IE7 and IE6. Do any one have code for removing the border of li last child.
I have now put the code :
.content ul li:last-child{
border-bottom:medium none;
}
Please give me a solution asap.
( )wassim November 19th
how can I go on a tab determined from an external link;
Let me explain: it is assumed that I have 3 tabs on my page http://www.monsite/onglet.php whose tab number 1 is still active by default, ok;
now it is assumed that from another web page I want to create a link that points directly to me on the 3rd tab of page onglet.php.
how do I do?
( )kareem November 27th
this is wonderful tutorial i will put acopy of this lesson on
( )my site here
http://www.as7ap4you.com
Groningen December 7th
thanks fot this great tutorial, i was using spry before. But after reading this tutorial i’m going to use jquery instead of Spry. Jquery has much more capebilities.
( )Daniela valero December 7th
hi! You did an excellent job with creating this tutorial. This helped me a lot, I was looking for some help doing tabs and this was very helpful and explicit for me
( )ngemdev December 8th
great work! i tried, learned a lot, jQuery stuff doeasnt work on older browsers though.. nevermind.. don’t like that stuff much anyway. luv simple and slick design.
( )Riya December 13th
Is there an easy way to rotate the tabs? i.e rather then displaying tab horizontally above the content, I would like to display the tabs vertically on the left of the content.
Any ideas?
( )haifafans December 28th
mmmmmmmm u can edit the java script riya
( )Derek January 8th
I would love to see this with tabs on left
( )hamid January 10th
very good
( )Sergecross January 17th
Great tutorial, great job, Thanks
( )stuckist January 19th
This was a fantastic tut, its really moved me forward, I might just add that theres a new version of jquery for download (1.3), so you will need to reference it correctly as its no longer called jquery-1.2.3.min.js
( )Willabee Wombat January 20th
Tested and works fine in jQuery 1.3 (I used the google link for my source:
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
Finding anchors of a specific class name has to search the whole DOM tree (uses getElementsByTagName). Better performance can be gained (especially in large documents) by targeting the nearest parent of the anchor that has an id (uses getElementById). Here’s how:
// When a link is clicked
( )$(”a.tab”, “#tabbed_box_1″).click(function () {
….
aaron January 23rd
Just wondering…I would like to have 5 tabs. The tabbing works great, but when the page first loads, I see the content for the 4th and 5th tab. Once I click on other tabs it only shows the correct content for the correct tab.
Any reason why the content for the 4th and 5th tab would show up on the initial load?
( )aaron January 23rd
nevermind…. if you add more tabs, make sure to add this in the css
#content_2, #content_3, #content_4, #content_5 { display: none; }
( )Chris January 28th
Fantastic — I’ve been trying to piece this process together from bits of other tutorials — thanks so much for putting this together!
( )zane February 4th
I want to download it ,but I can’t find it.please help me!where I can download.
( )strony internetowe February 11th
Great tut i love it
( )pantelis February 12th
If u dont want the page to move up add this:
( )event.preventDefault();
after this
$(”a.tab”).click(function (event) {
Mattsvarky March 1st
It won’t let me add more than just 3 tabs. what’s the problem?
( )Mattsvarky March 1st
SOLVED. functions.js
( )Sarimin March 2nd
Nice Job!
( )Ken Pepiton March 11th
You won my business and my gratitude. I put this url as the answer to my question at Adobe. You essentially saved a client for me. Thanks tons.
( )Gauson March 12th
Nice tutorial and a good site worth visiting again.
( )Ivan March 13th
Hi there,
I am interested in using this on a site i am building currently, it will be completely modded, but i would like to speak to you, or the creator to discuss some more functionality. Please let me know ASAP if this is possible, i appreciate your time and effort on this tutorial, it was very helpful.
( )sican March 17th
Great tutorial!
Just a tiny little error on Step 10, in the code.
Instead of
16# ul.tabs li a.active {
it should be
16# ul.tabs li a:active {
( )sican March 17th
my mistake, it’s not typo it’s a class LOL!
( )DCTHRASHER October 26th
OMG! NO!
…you were right! I tested it twice!
It *was* a typo! It neeeeds to be the colon, not the dot!
I is *not* a class. I was wondering about that behavior and you pointed it out! Good job!
DCTHRASHER October 26th
oops… okay …my fault
I think it *is* a class, but in IE6 it made the hover behave better, but now the active is not active with the colon. I should have ran more tests before I posted here.
Sorry people. (but it *did* fix the hover problem I was having in IE6)
-
I need a fix for onload. All 5 images show in a line, except for after clicking tabs.
Sam March 20th
The jQuery script automatically refreshes the entire page whenever a tab is clicked, so I’m using your script, which works fine. My question is how would I get two sets of three tabs to work (on the same page)? It would not require changing the functions.js script, right?
How would I alter the HTML code from this?
Topics
( )Archives
Pages
Roman March 24th
HI all!
Can i remove the slick effect. it “harm” my page and looks ugly.
( )elmo April 9th
If you add a declaration for the height property in the .content div, the border of that div shows up in IE 7. Does anyone know of a fix for that? Or a way to set the size of the content div so it stays the same size regardless of how much content is in it?
( )bern April 23rd
I’m having two problems with this tutorial;
One: The tab_of.jpg background covers the hover, so the tabs don’t change color when I hover.
Two: I added an extra tab and it’s content gets shown in the active tab on the first page load, but disappears when I click on another back and back to the active one (archives).
( )bern April 23rd
Ok, solved nr 2. Anything on nr 1?
( )kareem mahmoud April 24th
its the best tutorial but there is something wrong i think
in the step no# 5 >>>the line no# 11
supposed to be
not
( )and thank you very much for your effort
kareem April 24th
and i have the same problem that happened with Bern
:D
( )the background.jpg covers the tab
CgBaran Tuts April 30th
Nice tutorial thanks
( )Rishi May 3rd
This is one of the most in-depth and useful tutorials I’ve come across on the web for my purposes. Thank you so much!
( )Zac May 5th
Am I the only one getting a strange effect in ie7? the text is loading sometimes before the div ha sslid all the way up or all the way down. doesnt do it in firefox or safari
( )Surfmaster May 11th
Hi there,
This is my first time nettuts.com and will have to say, it went into my bookmarks list pretty quickly. Nice site with good info.
Now a question about this Tut.
———————————————–
I was wondering, if it was possible to remove the slide effect. So when clicked, tabs will just show without any effect (slide up/down or otherwise).
What do you think?
( )Las Vegas Web Design May 11th
Good menu design and tutorial.
( )Jacquelyn May 14th
I am running into trouble. The content is not changing when I click on the second or third tabs. I am not that savvie when it comes to Javascript… Any advice would be appreciated.
You can see the page at:
( )http://jacquelynfisher.com/layout/MCCS_Trial/tabbed.html
Jacquelyn May 18th
Please disregard the previous post. You know how it is… sometimes we miss a tiny mistake, have to take a break, and come back with fresh eyes.
Fantastic tutorial, by the way.
( )albi May 19th
That’s a very nice tutorial.
( )Good Job!!!!!!!!!!
Thank you
Vishwajeet Singh May 23rd
Great tutorial thanks.
( )Posted it to dzone
Krunal Jariwala May 25th
hi,
I’ve been looking for such tabbed content display from some time back. Found some but wasn’t good enough.
Your tutorial is just awesome & easy to understand.
( )manue June 3rd
hi this example not run in internet explorer, any fix for this problem?? please send me information…thanks
( )stev June 5th
what a great tutorial….
( )thanks for the help
Horace June 10th
Great tutorial. Thanks A lot.
( )Florida SEO June 10th
Excellent Menu and Great Tutorial …
Fantastic Job …
If the Archives and Pages tabs were accessible without JavaScript …
This menu would be damned near perfect …
( )Itai June 15th
Hi. Awesome tutorial, helped me out so much and will be in use in my new online shop.
Just one question, is there a way to automate the stylesheet to detect extra tabs so I don’t have to type #content_(number) manually … because we created the script to detect automatically to prevent any manual editing elsewhere, then this cropped up
( )John June 23rd
Thanks for the tutorial, i appreciate it.
( )Pandjarov July 2nd
Hello,
In Chrome there is an issue, all the tabs are displayed one below the other. I have made some modifications in order to change the effect but I don’t think that this is related.
$(document).ready(function(){
// When a link is clicked
$(”a.tab”).hover(function () {
// switch all tabs off
$(”.active”).removeClass(”active”);
// switch this tab on
$(this).addClass(”active”);
// slide all content up
$(”.content”).hide();
// slide this content up
var content_show = $(this).attr(”title”);
$(”#”+content_show).fadeIn();
});
});
It seems that the script requires some initialization. Could please take a look and share your thoughts on that matter?
( )Pandjarov July 2nd
I have tired added ID at the first element that I want shown by default and added the following lines to the script but this didn’t help too
$(document).ready(function(){
( )$(”.content”).hide();
$(”#first”).fadeIn();
Pandjarov July 2nd
Lol I am stupid
$(document).ready(function(){
$(”.content”).hide();
$(”#content_1″).fadeIn();
this is the proper initialization. Shows the first tab when you load the page. I was so stupid to try showing the tab instead of the actual content. Now it works perfect on IE FF and Chrome
( )ManFlaps July 23rd
GREAT tutorial. Well done, sir.
( )Kurt Williams July 24th
Great Tutorial! Just what I needed…
Example:
( )http://www.aclink.org/Planning/GIS_includes/tabbedmaps.asp
Tegan August 4th
What if you want rounded tabs using images? Should the tabs be placed in divs or tables? How would that be done?
( )DBRAND August 8th
http://d-brand.net – I have tired added ID at the first element that I want shown by default and added the following lines to the script but this didn’t help too
( )$(document).ready(function(){
$(”.content”).hide();
$(”#first”).fadeIn();
shauky August 12th
“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!”
I thought that only happened to me.
( )PandaMaster September 2nd
Could someone please come up with something that stops it from going back to the top of the page every time a tab is clicked? thnx
( )spica September 2nd
how i wish u could provide the image file coz i’m sucks with photoshop…
( )เพชรร่วง September 9th
Awesome
( )Florian September 22nd
Thank you! I am using the simple javascript variante on my website and it works perfectly!
( )I will give you some credits in my update-log
Side September 24th
Really thanks for this.
Ill put a good use to it for me nev project.
thank you very much, jquery is awsome
( )jmarreros September 25th
Thanks, it is so usefull
( )Kenan October 10th
Why no one remove this outlines? Its so ugly
:focus {
( )outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
}
Jason October 16th
The fix for the page jump is documented 3 times, do you people not read
best was by pantelis
go to your js function, (the one in the header)
Find
$(”a.tab”).click(function () {
add the word “event” to it between the ()
like this
$(”a.tab”).click(function (event) {
and then on the the next line before anything else place this
event.preventDefault();
That fixes the problem
as for the line under the tabs
go to your css and find
.content{
then after the line
border:1px solid #464c54;
insert
border-top:none;
(it can go anywhere in the .content declaration really)
well these fixes worked for me
and if you have any php knowledge you could have a simple get variable to select active tab, ie
http://www.mysite.com/page.php?tab=tab1
then at the top of your page place this
some of you will say that is a long get statement, but it will stop people guess at extra tabs that are not there and will always revert to tab one as been the default
then in your menu
add a if statement to each like
<a href="#" title="content_1" class="tab “>Details
<a href="#" title="content_2" class="tab ” >Map
<a href="#" title="content_3" class="tab “>Contact
NOTE: there is intentionally a space before active ( ” active”)
Now for those of you that know .htaccess
you can hide the GET variable too, by
insert this in your .htacces file
RewriteEngine on
RewriteRule ^page/([^/\.]+) /page.php?tab=$1 [L]
then you could have a nice url like
http://www.mysite.com/page/tab1
which is more seo friendly and looks better
and off course you would substitue
tab1
tab2
tab3
for something more seo friendly like
Business-Details
Map
Products
Contact
Have it working sweet
Great Tutorial
( )Jason October 16th
The missing php code remove spaces between < ?
<a href="#" title="content_1" class="tab “>Details
( )<a href="#" title="content_2" class="tab ” >Map
<a href="#" title="content_3" class="tab “>Contact
Carl - Web Courses Bangkok October 17th
Great tutorial thank yoU!
( )didi October 22nd
help. am using up to the javascript part only, but how do i make a link from another page to open a specific tab?
( )Yaniv October 25th
great tutorial got me back on course after a long solutions search for my project
( )Rob October 28th
Thanks for a great tutorial! Incidentally, just yesterday someone asked me about doing something like this on our company’s website. It’s far less complicated than I thought.
( )Rick October 29th
Can i put non-changing content like an image or text inside the box, but not inside the tabbing area?
( )so its in the dark blue rectangle but not in the white one? whenever i try to place something there, it appears below or above the white area