jQuery Tabs made easy

Posted on by Elio Rivero

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: Multiple Rotating jQuery Tabs. The new code features automatic rotation of the tabs, highlighting of the selected tab title and supports multiple tabbed panels.

First of all, see the demo for jQuery tabs

The markup…

…is quite simple

[html]
<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>
[/html]

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?

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!

[js]
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;
});

});
[/js]

That’s it, you can get the code in the demo page for these jQuery tabs and start tabbing away. Remember to check the new version of this article: Multiple Rotating jQuery Tabs, featuring automatic rotation of the tabs, highlighting of the selected tab title and supporting multiple tab panels.

Published by Elio Rivero

Software engineer, designer and photographer.

105 thoughts on “jQuery Tabs made easy”

    1. 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 🙂

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

  7. 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.

  8. 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.

  9. @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?

    René

  11. @Elliot

    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.

  12. René, just use the selector
    .htabs h2 a

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

  15. 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?

    Like
    ———-
    Tab1 Tab2 Tab3
    TABcontent1
    ———

    Tab3 Tab4 Tab5
    Tabcontent2
    ———

    and so on

    possible?

  18. 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.

  22. 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.

  24. 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?

  25. 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!!

  27. 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.

  31. 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!

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

  35. 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??

  36. 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! 🙂

    1. I’m glad you found it easy to follow. These are just things I develop on a daily basis so most of them are easy and light for browsers.

  42. {Amazing|Amazing Dude|Wow dude|Thanks dude|Thankyou|Wow man|Wow}, {that is|this is|that’s} {extremely|very|really} {good|nice|helpful} {info|information}, {thanks|cheers|much appreciated|appreciated|thankyou}.

    1. jQuery tabs are an easy way to add more content to your site when you don’t have enough space.

  46. First of all, I really enjoy your work and I love your way of designs.

    I would like to use your tabs on my upcoming site, but I cannot figure out how to use multiple tabs on a single page. Can u advise?

  48. Hi Elio,

    sorry to come back again with this issue. Maybe you got me wrong. I have to use multiple instances of tabsets in my new site. I saw that “Tanh” asks for the same on the rotaton tabs page.

  49. Nonreiter, I’ve been working on a jQuery plugin for the tabs but it’s not ready yet. Will let you know when it’s done 😀

Leave a Reply