How to create Tabs with CSS and jQuery from scratch

By Eric Berry
October 11, 2008 | Comments: 16

Another feature that is often added to Web 2.0 sites is tabbed content. I'm not talking about tabbed navigation. Tabbed content is when different chunks of HTML are shown depending on what tab is clicked.

I am using this on two sites:

http://www.partnerfusion.com http://paris.reservationcounter.com


Goal: Create a tabbed content window using CSS and jQuery

If you don't know about jQuery yet, let me have the pleasure to introduce you to it. It's a very easy-to-use JavaScript library that offers easy DOM manipulation, effects and a ton more. You can find out more on jQuery at their website: http://www.jquery.com.

Note: you can also use standard JavaScript or Prototype when doing this as well. I just really like jQuery (can you tell?)

Step 1. Get jQuery

In this example, we are going to use the jQuery core library found here.

Clear, Concise, and Entertaining Cover to Cover

JavaScript: The Missing ManualJavaScript: The Missing Manual — This book from bestselling author David McFarland teaches you how to use JavaScript in sophisticated ways -- even if you have little or no programming experience. Once you the master the language's structure and terminology, you'll learn how to use advanced JavaScript tools to add useful interactivity to your sites quickly, rather than script everything from scratch.

Step 2. Create your HTML page

I'm going to create a file called myapp.html. I'll put it in the same location that I placed my jQuery library at.

Notice that at the top of the HTML page, we are including three files. The first is a stylesheet that we will use to stylize the tabs and contents. The second is the jQuery library that we downloaded. The third is a small JavaScript file that I included to keep things clean. It's always good practice to separate out your scripts from your HTML pages when possible.

Step 3. Create your CSS file

Let's create the CSS file that's included in the HTML above. We'll call it 'myapp.css'

Lines 1-6 remove the dotted outline that Firefox puts around the clicked tabs.

Lines 7-11 set the width and style properties of the whole container.

Lines 12-17 sets the styles for the tab container. Notice that on line 15, we set a height of 21 pixels. This coincides with the font size set on line 10. If you were to increase or decrease the font size, you will also want to do the same for the height.

Lines 18-20 make it so that all the items in the unordered list (ul tag) appear next to each other instead of on top of each other.

Lines 21-30 sets the tab styles. You can use backgrounds instead of just colors here if desired.

Lines 31-34 sets the style for the active tab. Notice that the top padding is 4 pixels instead of 3. By doing this, we are able to make the bottom of the tab appear white making it look like it's part of the contents below.

Lines 35-39 sets up the style for the contents container. Notice that there is a border set for the right, bottom, and left. This is because our top border is already set on line 14.

Lines 40-42 set the non-active tab contents to be invisible.

Lines 43-45 set the active tab to be visible.

Lines 46-48 are used to clear out any floats that appear above it. (see lines 24-26 in the HTML above)

Step 4. Create your onLoad JavaScript file

As we did with the CSS file, we are going to create a .js file which contains our custom JavaScript code. We'll put it into 'myapp.js'.

Hopefully my notes in the .js file itself explains how it works well enough.

That should do it. Once you're done, your app should look something like this:

You can download my sample code here.

But Wait, There's More!

Sometimes it doesn't make sense to write this stuff from scratch when there are so many other resources out there to use.

Two that I have used in the past are JavaScript Tabifier by Patrick Fitzgerald and Yahoo UI Tabs.

I hope you like this post. If you have any suggestions on future how-to topics you would like me to cover, please email me at cavneb@gmail.com.


You might also be interested in:

16 Comments

Looking at that code I would guess that when Javascript is disabled only the first tab-content is visible and the other tab-content can never be viewed.

In the noscript case it would be nice if all the content was visible and the tabs acted as skip-links.

I like the example using jQuery. We just move from YUI to jQuery as our base lib. Have you tried the ExtJS tabs? I really enjoyed using them on an intranet project recently.

I have tried ExtJS. That is a good solution for certain types of applications. However, due to the huge amount of JavaScript that is required to code it, I tend to not use it. I try to keep my code as simple as possible.

I have just been asked to read up on jQuery for a new job. I appreciate this article, a real man help in getting to grips with it for a total beginner in jQuery. Given jQuery code is very useful to everyone. I am very glad for sharing your site.
-------------------
Angelinjones
Interactive marketing

I'm glad you are learning jQuery. It's an incredibly easy way to make your sites look and work great.

This looks like exactly what I'm after for my site however I can't seem to download the source files - i.e. the css file and the myapp.js file? could you possibly send them to me or upload them again?

thanks.

Thanks again for uploading the files etc again Eric - would you consider doing a tut on how to add animation to the the tabbed content? I'd find this really useful!

How can I change the active tab from a JavaScript function??

I used:
$('.tab')[0].click();

but it do not works in Fire Fox

please help me..

I've used this on our site and found it great--saved a ton of time and very easy to implement. Question though, since my tabbed content area appear a little lower on the page and I have items after it on my html page, when a tab is clicked (with teh reference of "#") it jumps up to the top of the page each time you move from tab to tab, which makes it hard to use. Is there a way to not have it do this?

@Kerry
If you insert a return false; at the end of the click function it won't follow the link so you avoid the bump of the page.

@Faani
use this code instead:

$('.tab:eq(0)').click();

It should work, note that the :eq(x) works with a zero-based index.

Hello there,

Great tutorial! I have come across a small problem though. What if I want to use two of these on one page? It is conflicting with each other.

Thanks!

him i add this to my classified site to diplay pictures, contact form in each tab. When i click a tab it displays the content briefly then refreshes to the homepage followed by the #. Is there something im doing wrong ?

Hi,

This is very good source code. I really like it. However, I do not know why it displays a line below an avtive tab when it is on the Internet Explorer Explorer browser but not on the Firefox browser. Is it possible to fix that issue?

Thanks,

Hi,

Very Nice code.

Is there a way I can maintain the tab position when user leaves the page and comes back using browser back button?

Thanks,

works great! thanks allot it helped me allot. for good practice I added the 'return false' thing so that the page wont jump to the top with every click

Thank you so much Eric,

Your code was perfect for my new website. Thanks again for your solution, works great.

News Topics

Recommended for You

Got a Question?