jQuery Tabs made easy

The other day I needed to create a block (or widget) with tabs, so I started checking different jQuery based tab solutions but they were all very large for what I needed. Most of the jQuery based tabs I found had a lot of functionalities to fulfill everything you need, but they end up being quite large, bloated and complex. I wrote this small jQuery dependant code to create my own tabs widget and thought you could find it useful.

There’s a new version of this article: Rotating jQuery Tabs. featuring automatic rotation of the tabs and highlighting of the selected tab title.

First of all, see the demo for jQuery tabs

The markup…

…is quite simple

<ul class="htabs hide">
<li>
<h2><a href="#design">Graphic design</a></h2>
</li>
<li>
<h2><a href="#development">Development</a></h2>
</li>
<li>
<h2><a href="#freebies">Freebies</a></h2>
</li>
</ul>
<div class="tabs">
<div id="design" class="tab">
<ul>
<li><a href="#">Typography</a></li>
<li><a href="#" target="_blank">Typefaces</a></li>
<li><a href="#">Painting</a></li>
<li><a href="#">Grid systems</a></li>
<li><a href="#">Optical balance</a></li>
</ul>
</div>
<!-- more tabs --></div>

Style

The CSS is quite large because I added different bullets for you to experiment, so you can get it from the source. It doesn’t have anything that will influence the behaviour. You can remove the CSS and you will get a plain markup for the jQuery tabs that will still work… you don’t believe me?

Graphic design
Development
Freebies

Preview kindly brought to you by Art-Direction plugin for WordPress please let me know if you find something weird with it.

jQuery

Now, the jQuery code to create our tabs!

jQuery(document).ready(function(){
 //if this is not the first tab, hide it
 jQuery(".tab:not(:first)").hide();

 //to fix u know who
 jQuery(".tab:first").show();

 //when we click one of the tabs
 jQuery(".htabs a").click(function(){
 //get the ID of the element we need to show
 stringref = jQuery(this).attr("href").split('#')[1];
 //hide the tabs that doesn't match the ID
 jQuery('.tab:not(#'+stringref+')').hide();
 //fix
 if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
 jQuery('.tab#' + stringref).show();
 }
 else
 //display our tab fading it in
 jQuery('.tab#' + stringref).fadeIn();
 //stay with me
 return false;
 });

});

That’s it, you can get the code in the demo page for these jQuery tabs and start tabbing away.

If you liked this you might want to buy me a coffee :)

Tags: javascript

Spread the word, share this post

Posted on Friday, April 3rd, 2009 in jQuery.
RSS 2.0 feed for comments.

Fun Photo Editor

I am just much impressed by your web layout, simply awesome. Love your posts too. Subscribed by rss, Keep rocking

April 4th, 2009 at 5:40 pm

Elliot

Thank you for your kind words.

April 4th, 2009 at 5:42 pm

I am much impressed by your rss icon too… I would just say WOOOOHHHH!!!! about your rss icon. love much.

April 4th, 2009 at 5:44 pm

The icon fading is created using the same principles than this jQuery tutorial on icon fading.

April 4th, 2009 at 6:09 pm

JurassicLover

Great work Elliot:)

I’m hopeful that you might know how to implement the jQuery tabs in Magento, specifically the product view page?

Cheers!

April 7th, 2009 at 10:54 am

I’ve played only a little bit with Magento, so I’m not sure where to start embedding this. I’m looking forward to work with Magento so stay tuned

April 7th, 2009 at 5:07 pm

Nikolai

Thanks this may be really useful to me in the future.

April 12th, 2009 at 9:02 pm

Cool, I’m glad it’s useful. I’m really loving the Art Direction plugin fro WordPress, what do you guys think about it?

April 12th, 2009 at 10:22 pm

Ben

Thanks ! Very short, clear and effective.

May 18th, 2009 at 4:23 pm

karedas

Great tutorial.

Easier to integrate and customize than ui tabs.

It’s been very helpfull.

June 17th, 2009 at 10:13 am

Thanks guys. What do you think about Art Direction plugin and the posibility to embed a lot of javascript and style like I just did on this post? Somehow I don’t this is a plugin for everyone but if it becomes widespread I think we will be seeing really interesting blogs in the future.

June 25th, 2009 at 5:58 pm

Rene, you could highlight the selected tab by adding a custom style to the tab whenever it’s selected and store the selected tab value in a variable.

July 16th, 2009 at 2:04 pm

René

@Elliot

Yes, it will be a perfect solution, but I’m not sure how to implement it. Do you have an example or something like this?

July 17th, 2009 at 6:20 pm

René, check the new tutorial I’ve added http://www.ilovecolors.com.ar/jquery-selection/

July 18th, 2009 at 1:42 pm

Thank you Elliot, I think that you saved lot of my time.

July 18th, 2009 at 10:24 pm

Sorry, but I talked too much early.

I can’t implement your code, because your 3rd example (the one good for your jQuery tabs) has different classes and codes, so I don’t know what I need to modify.

July 20th, 2009 at 9:39 pm

René, just use the selector
.htabs h2 a

apply the .selected class to it and you’re good to go

July 20th, 2009 at 9:50 pm

60+ Must Have jQuery Toolbox | tripwire magazine

[...] jQuery Tabs made easy [...]

July 21st, 2009 at 8:19 am

Elyot

Can you please tell me how to change the appearance of the active tab

July 21st, 2009 at 1:04 pm

Sumit

hi there

is it possible to use more of these tabs on one single site without copy & paste the code over and over again and include the same .js with a different name?

———-
Tab1 Tab2 Tab3
TABcontent1
———

Tab3 Tab4 Tab5
Tabcontent2
———

and so on

possible?

July 22nd, 2009 at 2:51 pm

ELLIOT

Looks like I’ll have to make a new revisited post about these tabs. Ok, I will post it soon. Meanwhile you can try the revisited sliding menu tutorial.

July 22nd, 2009 at 5:29 pm

rendom

How i can replace fadein with slide in this?

August 4th, 2009 at 11:19 am

Rendom, in this line:
jQuery(’.tab:not(#’+stringref+’)').hide();

instead of hide() call slideUp(), and in this line:
jQuery(’.tab#’ + stringref).fadeIn();

intead of fadeIn() call slideDown(). I hope it’s useful for you.

August 4th, 2009 at 11:01 pm

Strange but this didn’t work. Panel slide down and only then text appear.

August 5th, 2009 at 10:02 am

Rendom

My bad. I found error. I didn’t set “float:left” to tab-panel class. Thank you, great blog.

August 5th, 2009 at 10:09 am

You’re welcome, come back any time! I’m glad that you got it working =)

August 5th, 2009 at 12:24 pm

Simple tab widget using jQuery | Ajaxdump

[...] Sample | Tutorial Share and [...]

September 3rd, 2009 at 8:40 am

Ira

Thanks for this tutorial. Definitely slicker than having to load JQuery UI or something along those lines. I echo the above comments, though, and I wish I could figure out how to ’select’ the active tab.

I tried changing “#block li:first” to be “.htabs h2 a:first” and “#block li” to “.htabs h2 a:first”. This hasn’t worked so far.

Am I doing something wrong? Would greatly appreciate some guidance. Thanks.

September 5th, 2009 at 2:06 am

Rafael Suarez

Hi! is there a way to remove the “crispy” look in the fadeIn();??? in IE the fonts look awkward like if the effect stop before the its over.
Thxs!

September 7th, 2009 at 2:56 pm

Jeff Fisher

Great script! Thanks. So far I’ve got it running smoothly on my site redesign. However, I don’t know how to keep the focus on the selected tab, or more importantly to have Tab 1 active by default. Is there a way?

September 17th, 2009 at 12:17 am

Aaron

Id just like to say thanks, ive been pulling my hair out for the last 2 days trying to get the damn jquery tabs to work, the code you gave just worked!!

October 1st, 2009 at 8:28 pm

randolph roble

wow! I liked this design very much

October 19th, 2009 at 1:17 pm

Mathieu

This is the kind of jquery script I love… simple, nothing more than I relly need and if not, really easy to change for my own needs.

October 29th, 2009 at 7:41 pm

Developer’s Snacks: Exploration on Web Tab Modules | Onextrapixel - Showcasing Web Treats Without Hitch

[...] ilovecolors [...]

November 10th, 2009 at 4:06 pm

Rade

Your design looks very much like the one of Webdesigner Wall. BTW, nice post!

November 21st, 2009 at 7:37 pm

15 amazing jquery tabs tutorials | ExtraTuts

[...] the tutorial10.Ultra simple jQuery tabsThe DemoVisit the tutorial11.jQuery Tabs made easyThe DemoVisit the tutorial12.Animated tapped content with jqueryThe DemoVisit the tutorial13.jQuery To Fade Effects tabs The [...]

December 2nd, 2009 at 5:53 pm

Lawrence

Hi Elliot,

Simple and clear jquery tabs! Thanks for this.

However I have a question *(~.~)*

Is it possible to add a code that will automatically and continuosly go to the next tab even without clicking on the tabs?

How do I implement it?

Many Thanks!

December 6th, 2009 at 5:57 pm

Hi Lawrence, yes, I think it would be possible to do so. Maybe I can post a tutorial about doing it tomorrow. =)

December 6th, 2009 at 11:13 pm

Thanks Elliot!

Im gonna try using your code for my project. WIll be developing the page today

December 7th, 2009 at 5:30 am

Lawrence, the new article feturing rotating jQuery tabs is up!

December 8th, 2009 at 4:56 pm

indialike.com

This is really very good Site… Thanks

December 9th, 2009 at 1:32 pm

Tim

I’ve been trying to figure out for ages but can’t see how you’ve done it Elliot. In your example/demo, when the current tab is selected, there is a dotted border to the right applied to the selected tab….but I just cannot work out how this is happening as there is no reference to it in the CSS/ JS. Please could you help??

February 2nd, 2010 at 2:12 pm

Elio

Tim, that would be the outline CSS 2.1 property. The browser applies a default one. In order to highlight the currently selected tab, I suggest you to look at the updated tutorial, Creating rotating tabs using jQuery, featuring this and other tricks.

February 2nd, 2010 at 3:17 pm

lol – that’s made me look stupid. thanks mate. I have taken a look at the rotating one but know absolutely nothing about JS. I know this is lazy, but is there any way you could show me what code to insert in the old js, in order to have an ‘active tab’? Rotation is really not suitable for my project. Thanks!

February 2nd, 2010 at 6:55 pm

Tim, it’s ok
Take a look at the tutorial I wrote about highlighting selected items using jQuery. It will teach you how to build a basic selection and a multiple selection system, it’s quite more explained than what I could do here.

February 2nd, 2010 at 7:48 pm