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”

  2. Hello, first of all, congratulations for the great blog.
    As I’m a beginner in jquery, I have been practicing with this and finally got worked. But now I have a problem, and I hope you can help me.
    What must I do to have two different “place” for tabs. I put “place” because I don’t know a lot of english, and I hope you understand.
    I have a couple of tabs in one place, and another in another place in the same page, but they collapse.
    Thanks in advance.

    1. Xandre, I’ve developed a new version of the rotating tabs supporting multiple tab blocks with different rotation speed for each one. The reason about why it’s not published is that it will be turned into a plugin to add more options. For instance, when you initialize the plugin right now you need to add the tab rotation speed as a mandatory parameter. In the future plugin this will be more fault tolerant and the option to create a rotating tab or not will also be added. Meanwhile refer to the newer version of the tabs, the rotating tabs. This version also allows you to place multiple instances of the tabs on your html page.

  3. Elio, thanks for the quick answer. But as I told you, my english ins not very good and I think I didn’t explain good.
    What I mean is imagine that I want two group of tabs in the same web.
    One like in the example, and at the bottom of that, another one.
    Thanks again.

  4. Well, I finally made it.
    I have made another general.js but with tab2, so I have two differents.

    Thanks anyway.
    I will keep at your blog to see what more I can learn.

  11. Thank you for that!I have a questions please:how do i change the color of o tab visited?i try with a.visited in css but not luck.
    thank you for reading this!

    1. Impalor, you need to define some custom styles in your CSS. However, I think you should use the most recent version of this tutorial and the newest code for the tabs, Multiple jQuery Tabs. The new code supports many tabs in a page, current tab highlight, and has some bugfixes.

  12. @Elio:thank you for your answer;i have modified de css like that :
    .htabs h2 a:visited{
    /*color: #000;*/
    };
    but unfortunnely nothing happen’t;thank you

  18. If the tabs are in other location that top of the page, you will get a scroll to the anchor, which is simply ugly.
    I’m thinking than using anoher attribute to point the target could help.
    I will try it and share results.

  19. farid, there’s a highlighted block on the article mentioning that this is an outdated tutorial and has been replaced by a newer one where this issue is addressed and other features were added: Multiple jQuery Tabs

    1. Thanks Luis! I suggest you to look into the more recent version of the tabs code which contains more features.

  22. Hi,

    Just a few question before using jQuery Tab.
    Is jQuery Tab SEO friendly? Do spiders ignore content in jQuery Tab?

    The above tutorial is execellent. I was searching on the net for almost 2 hours. Thankfully I came across your website and I got the jQuery Tab working in no time.

  29. Hi there.
    First of all : Congratz, it’s awesome.

    I would like to know if you have any solution to make a “next page, prev page” system into the tabs.

    Imagine that you have 2 tabs. And in theses tabs, you have many links. I’m trying to do something like : if i have more than 10 links. I can clic on “Next” and, the tab reaload with the 10 others links.

    Am I understandable ? 🙂

  30. Hi,

    I found how to do it. But, I have a little question. Can we, with a jquery after the tabs, make one as the first ?
    Like, i write all my tabs #1, #2, #3 and at the end, I want to write a function which reveals the #2 and hide the others..

    Cheers.

  31. Allumette, of course, it’s possible: after the tabs are displayed, hide all the tabs and fade in the tab you want to show using its ID.
    Remember to check the new version of this article, Multiple jQuery Tabs for a more powerful tabs system.

  38. Wonderful blog! Do you have any suggestions for aspiring writers?
    I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you recommend starting with a free platform like WordPress or go for a paid option?
    There are so many choices out there that I’m totally confused .. Any suggestions? Cheers!

  39. Wonderful post but I was wondering if you could write a litte
    more on this topic? I’d be very grateful if you could elaborate a little bit more. Bless you!

  40. The Algerian home fries has surrounded a natural gas
    complex where armed fighters are holding a group of foreign workers, after at least two people were killed in Suez and six in
    Alexandria. However, it was not clear yet how many.

  41. I’ve been browsing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all site owners and bloggers made good content as you did, the net will be much more useful than ever before.

Leave a Reply