Allground - Responsive Fullscreen Backgrounds for WordPress with images, YouTube videos, Google Maps and self hosted videos

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

<ul class="htabs hide">
<h2><a href="#design">Graphic design</a></h2>
<h2><a href="#development">Development</a></h2>
<h2><a href="#freebies">Freebies</a></h2>
<div class="tabs">
<div id="design" class="tab">
<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>
<!-- more tabs --></div>


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.


Now, the jQuery code to create our tabs!

 //if this is not the first tab, hide it

 //to fix u know who

 //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
 if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
 jQuery('.tab#' + stringref).show();
 //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. 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.

Update 5/5/2011

You can now purchase on CodeCanyon a widget for WordPress based in the latest version of this code: Rotating Tabs Widget for WordPress to displays your latest posts from categories or tags using the rotating tabs.

“jQuery Tabs made easy” received 105 comments! Add yours.

  1. Fun Photo Editor April 4th, 2009

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

  2. Elliot April 4th, 2009

    Thank you for your kind words.

  3. Fun Photo Editor April 4th, 2009

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

  4. Elliot April 4th, 2009

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

  5. JurassicLover April 7th, 2009

    Great work Elliot:)

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


  6. Elliot April 7th, 2009

    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 :)

  7. Nikolai April 12th, 2009

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

  8. Elliot April 12th, 2009

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

  9. Ben May 18th, 2009

    Thanks ! Very short, clear and effective.

  10. karedas June 17th, 2009

    Great tutorial.

    Easier to integrate and customize than ui tabs.

    It’s been very helpfull.

  11. Elliot June 25th, 2009

    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.

  12. Elliot July 16th, 2009

    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.

  13. René July 17th, 2009


    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?


  14. Elliot July 18th, 2009

    René, check the new tutorial I’ve added

  15. René July 18th, 2009

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

  16. René July 20th, 2009


    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.

  17. Elliot July 20th, 2009

    René, just use the selector
    .htabs h2 a

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

  18. 60+ Must Have jQuery Toolbox | tripwire magazine July 21st, 2009

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

  19. Elyot July 21st, 2009

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

  20. Sumit July 22nd, 2009

    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

    Tab3 Tab4 Tab5

    and so on


  21. ELLIOT July 22nd, 2009

    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.

  22. rendom August 4th, 2009

    How i can replace fadein with slide in this?

  23. Elliot August 4th, 2009

    Rendom, in this line:

    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.

  24. rendom August 5th, 2009

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

  25. Rendom August 5th, 2009

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

  26. Elliot August 5th, 2009

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

  27. Simple tab widget using jQuery | Ajaxdump September 3rd, 2009

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

  28. Ira September 5th, 2009

    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.

  29. Rafael Suarez September 7th, 2009

    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.

  30. Jeff Fisher September 17th, 2009

    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?

  31. Aaron October 1st, 2009

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

  32. randolph roble October 19th, 2009

    wow! I liked this design very much

  33. Mathieu October 29th, 2009

    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.

  34. Developer’s Snacks: Exploration on Web Tab Modules | Onextrapixel - Showcasing Web Treats Without Hitch November 10th, 2009

    [...] ilovecolors [...]

  35. Rade November 21st, 2009

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

  36. 15 amazing jquery tabs tutorials | ExtraTuts December 2nd, 2009

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

  37. Lawrence December 6th, 2009

    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!

  38. Elliot December 6th, 2009

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

  39. Lawrence December 7th, 2009

    Thanks Elliot!

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

  40. Elliot December 8th, 2009

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

  41. December 9th, 2009

    This is really very good Site… Thanks

  42. Tim February 2nd, 2010

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

  43. Elio February 2nd, 2010

    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.

  44. Tim February 2nd, 2010

    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! :)

  45. Elio February 2nd, 2010

    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.

  46. Lucian February 4th, 2010

    Really great! thanks, a lot!

  47. Elio February 4th, 2010

    you’re very welcome :)

  48. webguy February 10th, 2010

    The simplest yet most effective explanation thank you very much…

  49. Elio February 10th, 2010

    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.

  50. Techflaps | 34 Excellent Tutorials About How To Create And Use jQuery Tabs March 4th, 2010

    [...] SIMPLE JQUERY TABS III [...]

  51. jQuery Tabs made easy « FlagMag March 6th, 2010

    [...] jQuery Tabs made easy Categories: jQuery Tags:jQuery, tabs Kommentarer (0) Trackbacks (0) Skriv en kommentar Trackback [...]

  52. Alfonso Freitas April 2nd, 2010

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

  53. March JQuery Goodness Roundup April 5th, 2010

    [...] Tabs Made Easy [...]

  54. Prashant Renge April 26th, 2010

    Amazing! i also looking for that things. It is simple jquery tabs.

  55. Elio April 28th, 2010

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

  56. 12 Amazing jQuery Tabbed Interface Plugins and Tutorials « Defonic International Solutions May 9th, 2010

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

  57. Neonreiter June 25th, 2010

    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?

  58. Elio June 25th, 2010

    Neonreiter, you might want to use the tutorial that supersedes this one
    Rotating jQuery Tabs.

  59. Nonreiter June 25th, 2010

    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.

  60. Elio July 2nd, 2010

    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 :D

  61. March JQuery Goodness Roundup | Radical Development July 23rd, 2010

    [...] share wit the community?TabsJQuery Tools: Tabs Done RightTabContainerjQuery UI TabsBookmarkable TabsTabs Made EasyToolTipsJQuery Tools: Tooltips Done RightThe JQuery TooltipqTipClueTipAJAX TooltipSlidersJQuery [...]

  62. blogregator July 24th, 2010

    Great tutorial! Thank you!

  63. xandre August 13th, 2010

    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.

  64. Elio August 14th, 2010

    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.

  65. xandre August 14th, 2010

    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.

  66. xandre August 14th, 2010

    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.

  67. Mercury September 2nd, 2010

    @Rafael, it is a knows issue with jQuery’s fadein() and fadeout() functions. Check out this post here, it explains the reason and provides a solution:

    Thanks for a great code…

  68. Elio September 2nd, 2010

    Thanks Mercury for sharing this fix. It’s a very easy and elegant solution to IE7′s rendering issue.

  69. Jquery13 is a place where designers and jquery developers can find very helpful plugins. » 15+ Eyes Catching jquery tabs September 5th, 2010

    [...] 11.jQuery Tabs made easy The Demo Visit the tutorial [...]

  70. Must See the best jQuery Examples September 6th, 2010

    [...] Download jQuery Tab [...]

  71. Zinnia September 18th, 2010

    Can u send the CSS plz?

  72. Tabs using Jquery demo and download links. September 22nd, 2010

    [...] The Demo Visit the tutorial [...]

  73. impalor October 28th, 2010

    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!

  74. Elio October 28th, 2010

    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.

  75. impalor October 29th, 2010

    @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

  76. 95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets - tripwire magazine December 8th, 2010

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

  77. jQuery Tabs Tutorial: 18 Exceptional Techniques | TutorialChip December 18th, 2010

    [...] View Tutorial – View Demo [...]

  78. 30 jQuery tabs tutorials | January 15th, 2011

    [...] 9. Create Bounce out Vertical menu with jQuery [...]

  79. Jquery tabs turotials | Code Album March 2nd, 2011

    [...] Visit the tutorial [...]

  80. Meenakshi March 12th, 2011

    Thanks for the article!!

  81. farid March 25th, 2011

    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.

  82. Elio March 25th, 2011

    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

  83. 10 amazing jQuery Tabs « | Learn Web Design With Us April 16th, 2011

    [...] jQuery Tabs made easy Demo || Download You can leave a response below, or trackback from your own site. [...]

  84. Luis Larrea April 22nd, 2011

    This is by far the simplest and most successful non-stock tab plugin I’ve come across. Other more powerful tab plugins all have issues.

  85. Elio April 23rd, 2011

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

  86. Meher September 11th, 2011


    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.

  87. Elio September 12th, 2011

    Hi Meher, jQuery Tabs is SEO friendly since spiders can perfectly see the content in the tabs.
    Try using the latest version of tabs for better results.

  88. Silas Hechinger September 13th, 2011

    I concur, If you wish Yahoo to acknowledge your site and not blacklist it you better pay extra attention to their guidelines.

  89. 10 jQuery Tabs Tutorials | jQuery4u October 20th, 2011

    [...] 9. jQuery Tabs Made Easy [...]

  90. y8 games November 14th, 2011

    I need it. Thanks a lot

  91. 30个实用的jQuery选项卡/导航教程推荐 | FM52.COM November 18th, 2011

    [...] 9. Create Bounce out Vertical menu with jQuery [...]

  92. 30 useful jQuery tab / navigation tutorial recommended - Open News November 18th, 2011

    [...] 9. Create Bounce out Vertical menu with jQuery [...]

  93. allumette December 16th, 2011

    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 ? :)

  94. allumette December 19th, 2011


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


  95. Elio December 19th, 2011

    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.

  96. allumette December 19th, 2011

    Thank you so much. I found something and forgot to tell it here.

    Thank you again ;)

  97. Lasse Leth December 23rd, 2011

    Can i find all the code. I can’t find it in the preview..

  98. Elio December 23rd, 2011

    Lasse, please refer to the new tab system, Multiple jQuery Tabs where you will find a zip containing all the code for you to download. In addition, if for some chance you need a solution to integrate in WordPress, you can get the WordPress Tabs Widget.

  99. Jose March 28th, 2012

    How to add an active state to the selected tab?

  100. Sayan June 22nd, 2012

    i also added a basic jquery tab tutorial also discussed about fouc issue

  101. bashar June 28th, 2012

    do you any idea how to mix up jquery tab with an AJAX Tab Container ?


  102. August 23rd, 2012

    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!

  103. Carlo August 24th, 2012

    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!

  104. 편집/삭제 March 23rd, 2013

    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.

  105. stay with me March 24th, 2013

    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 comment