113 Responses

  1. Karl
    Karl Published |

    Hi Justin,

    Nice tutorial! One way you could reduce the code a bit is to show the correct div based on the class of the clicked tab. That way you wouldn’t have to repeat the same basic thing four times. Here is what it would look like:

    $(document).ready(function() {
    // setting the tabs in the sidebar hide and show, setting the current tab
    $('div.tabbed div').hide();
    $('div.tabbed ul.tabs li.t1 a').addClass('tab-current');


    $('div.tabbed ul li a').click(function(){
    var thisClass = this.className.slice(0,2);
    $('div.tabbed div').hide();
    $('div.' + thisClass).show();
    $('div.tabbed ul.tabs li a').removeClass('tab-current');

  2. Kristian
    Kristian Published |

    Hi justin.
    Again, this is great. I have downloaded the updated visionary theme, and thanks to this tutorial i have actually managed to get TAGS displayed where the archives, popular post and so on are.

    Feeling like a champ here after reading the tutorial.

  3. Justin
    Justin Published |

    Karl, thank you. I knew there was an easier way because I was wondering what I’d do if I ever had a script where I had 10 tabs or so. That would get a bit out of hand. I’m about to update the code.

    Kristian, I’m glad I could help and that you’ve got your tabs working like you want them.

  4. Ozh
    Ozh Published |

    Nice explanations & tutorial. One thing I miss though with this is more correctly structured markup, that makes sense when JS is off on when printed, for instance.

    At the moment you have:
    <div id="div1">stuff</div>
    <div id="div2">stuff</div>
    <div id="div3">stuff</div>

    Something that would make more sense would be:
    <div id="div1">stuff</div>

    <div id="div2">stuff</div>

    <div id="div3">stuff</div>

  5. od3n
    od3n Published |

    i use it also in my blog. try take a look. i did change the css also. but i’ve problems with css. it will float on left if there’s no content on left. help me please. dont understand the id and class u use in the page.

  6. Mani Karthik
    Mani Karthik Published |

    Good work Justin. One question – would the links be spiderable?

  7. Justin
    Justin Published |

    Od3n, I’m not sure exactly what you’re talking about. Everything looks pretty good to me.

    Mani, thanks. I believe the links would be. That’s not my area of expertise. The links are just simple HTML links. So, if those are spiderable, then I suppose these are.

  8. od3n
    od3n Published |

    @Justin try use search in my blog to find something not there for example, type xx. u\’ll see some broken style. where to modify it? sorry but i\’m just noob. and how to change the css style of the tabbed content? wanna it look like my side bar style with cube numbering style. erm. can give me ur email?

  9. Justin
    Justin Published |

    Od3n, this float issue has nothing to do with this script. This is a CSS mistake that you’ve made somehow. I would suggest structuring it or changing your CSS to fit with your theme. The CSS is left open so that you can modify it to fit with your site. This is a tutorial for people with a more advanced knowledge of CSS and XTHML.

    I know English may not be your first language, but for the sake of my sanity, please capitalize your sentences and try to use some form of proper grammar. 🙂

  10. od3n
    od3n Published |

    @Justin Thanks. I’ll try to improve my english.

  11. Bob Dunne
    Bob Dunne Published |

    Hi Justin,
    I have no design experience and am wondering how do i put the php files sidebar, style and header into a html file to test out and see it working.

  12. Justin
    Justin Published |

    Bob, I’m not exactly sure what you’re asking because you don’t put these into an HTML file. You open the template files from your theme that I mentioned in the tutorial.

    If CSS and XHTML are totally unfamiliar territory for you, then this really isn’t a tutorial you should be following. This isn’t exactly an advanced tutorial, but it’s definitely not for beginners. I can point you toward some good starting places though.

    Try to leave some more specific details about what your problem is, and I’ll try my best to help out.

  13. IngaOz
    IngaOz Published |

    I was looking for tutorial like this for week now, glad that I found it finally! It looks a bit complicated though… However, I’ll try to understand… 🙂 Thanks again!

  14. IngaOz
    IngaOz Published |

    Oh well, something is not working for me – it shows 1st table and don’t let me click on tab2 or tab3 etc… I give up for tonight it’s already 5AM here, will try sort it out Tomorrow probably.

  15. Justin
    Justin Published |

    IngaOz, I hope you get it working.

    One minor note: please don’t leave a link to your feed in the website field when commenting. This unintentionally gets users to subscribe to your feed. It’s something I won’t allow on JustinTadlock.com.

  16. Rene
    Rene Published |

    Thanks a ton for this tutorial! It is exactly what I was looking for. I was able to use it on a static page very easily. GREAT JOB! 🙂

  17. Jonah Dempcy
    Jonah Dempcy Published |

    My colleague Alex recently posted his take on creating tabs with jQuery. You can compare the implementation here:


  18. remeinic
    remeinic Published |

    thanks for the tutorial.. this help me a lot.

  19. Hungzai
    Hungzai Published |

    Great tutorial! But i am facing a problem. Problem is it isn’t producing tabs for me, instead, it is producing a

    Tab 1
    Tab 2
    Tab 3
    Tab 4

    with results below all that.

    What did i do wrong my dear?

  20. Hungzai
    Hungzai Published |

    Ok, got it. It ain’t working in OPERA.

  21. Hungzai
    Hungzai Published |

    I’m done. Took me a lot of time to get it working. And still not perfect, a little cranky. Anyway it’s a good start. Thanks for your article.

  22. Hungzai
    Hungzai Published |

    If you look at my site in firefox, there appears a dot beside my tabs, it doesn’t in IE or OPERA. Is that a bug ?

  23. Hungzai
    Hungzai Published |

    One more question, how to i center the list of tabs? I have tried everything and it doesn’t. It will float to the left. The only way to do this is to place them inside tables but even then, they don’t center inside cells, you have to adjust the cells according to the length of the tabs, but problem with that is every browser are displaying different lengths and as such it doesn’t work in OPera.

    I wonder how people manage to center those tabs? Please share your valuable techniques! Thanks in advance!

  24. Hungzai
    Hungzai Published |

    Another problem is that cannot operate 2 tabs in the same template. When one is working, it would disable the other. Or did i overlook something?

  25. Hungzai
    Hungzai Published |

    Ok, it’s all up and working perfectly now. For those who needed an example here’s mine http://www.hungzai.com/red-house/

    There are a few issues i encountered in drilling it to perfection.

    1) There is a bug in firefox where if you have a list items in one of your tab’s content, the first item on the list would jump out of the content box(container). The solution is to place a float: left in .tabbed ul.tabs

    2) There is no way you can center the row of tabs. It just doesn’t work, whether you wanna float it or align it or even if you’re placing them inside a cell in a table, they would be aligned left. I’m not sure why but the solution for me is first, put everything in a cell and adjust the cell to the right length(that is before the last tab returns the next row). Bear in mind, at this point there would still be a little leftover spaces on the right, most likely to be something betweeen 5px to 10px. Next what i do is to place a left border in .tabbed ul.tabs to counter the right spaces. If you want it to look more perfect, you could do the top and bottom too.

    Lastly if you decide to use them in a table, you CANNOT place the codes in different cells, they just don’t work and cut off from each other. You have to place them in one single cell. It’s for alignment purposes only anyway if you decide to use them on a page, for sidebars i guess you can do without one since it would be auto-adjusted. Good luck!

  26. Hungzai
    Hungzai Published |

    Oops sorry! I didn’t know you have a forum for it, i apologise for flooding your comments area. Feel free to delete my comments here!

  27. Reyner
    Reyner Published |

    nice tutorial. I’m learning how to do a box with some links using tabs for different categories with jquery.. I google you! so i use some part of your tutorial and some part of the jquery documentation to have a better idea for the jquery tabs

    thanks again!

  28. Help Developer - CSS, Dreamweaver, Gimp, HTML, JavaScript, PHP, VB.NET, Visual Studio, Wordpress Tutorials » Blog Archive » Create a tabbed AJAX area in Wordpress
  29. Wordpress Island - Wordpress Themes, Plugins, News, Forums, Articles » Blog Archive » TUTORIAL: Create a tabbed AJAX area in Wordpress
  30. Asuka
    Asuka Published |

    Does it still work with wordpress 2.6? I get the tabs and css ok. Everything looks nice nut nothing happends when I click a tab?

  31. Create a tabbed AJAX area in Wordpress - Blue Box Sols
  32. Danh ba web 2.0
    Danh ba web 2.0 Published |

    Thanks tutorial
    I like it very much !

  33. J Mehmett
    J Mehmett Published |

    Hi Justin,

    I was testing the above tutorial to implement it with a WordPress theme, I have seen a misspelling in the CSS part, which may lead to some confusion. Here is the code I’m up to:

    .tabbed ul.tabs li {
    list-style-typ: none;
    float: left;
    margin: 0;
    padding: 0;

    Note: list-style-typ:, where it was supposed to be list-style-type: . An “e” is missing.

    Good tutorial, though. Thanks for sharing.

  34. mwpwalshe
    mwpwalshe Published |

    If I use a Hello inside the tab it does not display any content in latest firefox? How can I use within the tab div??Thanks

  35. mwpwalshe
    mwpwalshe Published |

    whoops looks like Im missing “”div”” tabs 4m above I will try again!
    If I use a div Hello /div inside the tab – It does not display any content in the latest fiorefox??? How can I use the div /div tag within the tab div?

  36. Divya
    Divya Published |

    Aye Justin,

    Thanks a lot, step by step explanation really helped me,
    I’m a PHP developer and I’m very new to Design stuff.
    This was quite helpful.

  37. The Power of WordPress and jQuery: 30+ Useful Plugins & Tutorials
  38. Wordpress Blog Services - The Power of WordPress and jQuery: 25+ Useful Plugins &amp; Tutorials
  39. indojepang
    indojepang Published |

    in tab 3 example you put a div in it.. but it won’t show up.. cos it hidden?
    how to show this div?

  40. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials | @article @lbum
  41. Internet Blog Addict » 9 awesome Jquery plugins
  42. Free WordPress and jQuery: 25+ Useful Plugins & Tutorials | guidesigner.com
  43. Dan
    Dan Published |

    Hi Justin, this is a great post. I got it to work immediately but I’ve come across a problem. I have set the tabs to load conditionally, checking to see if a certain custom field exists or not, and it works great if the first tab is supposed to load along with others. But when it happens that the first tab is not needed and other tabs are, it would show the tabs well, yet fail to load automatically unless I click on them.

    I see that the tabs.js code tells the first tab to stay open, but do you think there’s other ways to let other tabs load in case the first one is not needed? For example, on my site, I am trying to put up multiple versions of videos.


  44. Ville Walveranta
    Ville Walveranta Published |

    This was very useful! Thanks!

    I implemented tabs based on this example after having first tried jQuery UI Tabs which didn’t allow separating the tabs container from the corresponding content divs. Using this example as a starting point it was a piece of cake! 🙂

  45. Yanyan
    Yanyan Published |

    dude, your my savior… this tutorial really helped me with my project… BWAHAHA thanks man!!!

  46. Femin
    Femin Published |

    Nice Tutorial

  47. Josh Lewis
    Josh Lewis Published |

    Well I used your tutorial and loved it and it worked great, but, when I you rollover the tabs the cursor thinks it is text but as we know its really a tab thats clickable. I didn’t read all these comments in case someone else already posted a solution but I used this:

    .tabs a:hover, .anchors a:focus, .anchors a:active {
    cursor: pointer;

    And it worked great.

  48. Free WordPress and jQuery: 25+ Useful Plugins & Tutorials | designersmantra.com
  49. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials | forcto.com
  50. Web Design Glasgow
    Web Design Glasgow Published |

    Hi Justin,
    I had having to design anything that scrolls, but alas sometimes this is not possible. So thanks for the heads up on tabbing. I am sure that visitors would much prefer this.

    thanks again

  51. Shooting in Cornwall
    Shooting in Cornwall Published |

    This is fantastic, i’ve been working on a way to make our new website more web 2.O and adding tabs for the blog sliding to different categories will be very nice. Great work. Dave

  52. Doug Hogan » daily life
    Doug Hogan » daily life at |
  53. ExpertSoul
    ExpertSoul Published |

    Hi Justin,

    Great article! I started working with tabs recently and having issue with events and disabled tabs.

    At page load I am attaching click event to the tabs and disabling few of the tabs. Even if tabs are disabled, click is still firing. Is there a way to find out if clicked tab is disabled so that I can avoid doing regular operations.


  54. raja
    raja Published |

    i have this kind of error during runtime what can i do
    please help me
    Fatal error: Call to undefined function: _e() in C:\Program Files\xampp\htdocs\tab\sidebar.php

  55. bubba
    bubba Published |


    you probably don’t have wordpress installed. Just replace with the plain text “Tab 1”. Do it for all of them.

    @justin thanks for the write up. Totally answered a question for me. One note: Basing this on the tab’s href would allow it to work as a ‘jump list’ when JS is off. As it is, this will just leave a dead list of non-links on the page when JS is unavailable. Tab 1 and then content.

  56. bubba
    bubba Published |

    wow. comment code removal fail. sorry, dunno how to get it in.

  57. Sumit
    Sumit Published |

    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


  58. jQuery Wordpress Plugins Strikes Again | WPThemesPlugin.com
  59. Disha Hosting » jQuery Wordpress Plugins Strikes Again
  60. 30 Tutorials Combining Both Wordpress and jQuery : Speckyboy Design Magazine
  61. Lista de Tutoriais combinando JQuery e Wordpress: turbine seu blog | Blog Tecnologia e Educação
  62. 30 Tutorials Combining Both Wordpress and jQuery | huibit05.com
  63. paul whitehead
    paul whitehead Published |

    this was awsome, but when i turned off the JS for accessability testing, it hide the content, which isnt so good.

    It was easy to fix though, by adding the display none class when the js is executed (the last line was added )

    $(document).ready(function() {
    // setting the tabs in the sidebar hide and show, setting the current tab
    $(‘div.tabbed div’).hide();
    $(‘div.tabbed ul.tabs li.t1 a’).addClass(‘tab-current’);
    $(‘.tabbed div.t2, .tabbed div.t3, .tabbed div.t4’).addClass(‘tabbed_hidden’); //here.
    //this line means that the tabs are hidden by js not css on load so when js is disabled the divs are shown.

    but then the class must be removed when the user clicks the ul li a link…. like so…

    $(‘div.tabbed ul li a’).click(function(){
    var thisClass = this.className.slice(0,2);
    $(‘div.tabbed div’).hide();
    $(‘div.’ + thisClass).show();
    $(‘div.tabbed ul.tabs li a’).removeClass(‘tab-current’);
    $(this).removeClass(‘tabbed_hidden’); //here
    //this just removes the class we added before

    and the css


    i hope this helps anyone who wants to make their websites accessable.

  64. sandu
    sandu Published |

    I really liked your tutorial ! I consider it the most practical example i found. I use it everytime i need it ! Thanks for sharing your knowledge! 🙂

  65. 30 Tutorials Combining Both Wordpress and jQuery | .::tek3D Weblog::.
  66. Customizing WordPress With JQuery | WordPress eCommerce
  67. vicky
    vicky Published |

    hi ,
    i m new one. so can u tell me how can i implement this code in my page.

  68. Hara Kim
    Hara Kim Published |

    Thanks man this worked perfectly on my site after I cleared my cache lol..

  69. Philippine Outsourcing
    Philippine Outsourcing Published |

    ey, thanks for this tutorial … been searching for the right one

  70. 30 Tutorials Combining Both jQuery and Wordpress
  71. 30 Tutorials for Using JQuery in Wordpress | oOrch Blog
  72. 40+ Quite Useful Wordpress Plugins using jQuery | tripwire magazine
  73. Mohamed Amine
    Mohamed Amine Published |

    Hello, i have enjoyed this tutorial. Much appreciated.

  74. Adam Bourg » 9 awesome Jquery plugins
    Adam Bourg » 9 awesome Jquery plugins at |
  75. How To Create Tabs Using jQuery for Wordpress | bijusubhash.com
  76. chris
    chris Published |

    thanks..it’s good tutorial..i have tried it and it works heheh ..

  77. Nicolas
    Nicolas Published |

    Old now, but good tutorial 🙂
    To everybody who is strugging to make it working with the latest version of wordpress, you just have to replace the “$” sign in the tabs.js to “jQuery” as Wordpress built-in jQuery doesn’t recognize the dolalr sign, but the jQuery name.


    I think you should mention it in your blog post, as it will save time to people trying to make it working with the latest wordpress isntallations.


    1. Scott Bolinger
      Scott Bolinger Published |

      Thanks for the tutorial Justin!

      @Nicolas Wow, wish I saw this before I spent an hour banging my head against the wall. I know this is an old tutorial Justin, but the simple change to no conflict would help others out 🙂

  78. Elmer
    Elmer Published |

    yeah, thanks Nicolas you save my day!!

  79. How To Create Tabs Using jQuery « Ajax Freak
  80. Paul @ HeadwayTips
    Paul @ HeadwayTips Published |

    @nicholas – you’re right – this took me a while to figure out. To explain it a little more – wordpress now loads jQuery in no-conflict mode – which means you can’t use the $ shortcut.

    But if you use jQuery(document).ready(function($) then you can leave the $ within the function..


    cheers, pc

    SHASHANK Published |

    hey m unable to find tab.js file could you help me out plz
    i searched for it,
    it might seem funny to you guys,but i am a newbie here
    anyine to help me out ???

  82. The Power of WordPresjQuerys and : 25+ Useful Plugins & Tutorials | Umraz Ahmed | The Official site
  83. scandell
    scandell Published |

    Many here are right. Currently you are unable to declare any DIV classes under each tab. They simply do not show up.

  84. 30 Tutorials Combining Both Wordpress and jQuery | Coyot [at] CanalCoffee.com : Plugins
  85. jay
    jay Published |

    i m looking for jquery tabs and will try ur code

  86. 12 Amazing jQuery Tabbed Interface Plugins and Tutorials « Defonic International Solutions
  87. Sayontan
    Sayontan Published |

    Thanks for this tutorial. I took the concept explained in here a step further and combined it with a few more JQuery functions. The result was a natively tabbed sidebar. So whatever widgets you add to your sidebar get displayed as tabs.

    It was an interesting problem to think about, because the WP sidebar parameters $before_widget, $after_widget, $before_title and $after_title don’t lend themselves naturally to the markup you proposed above. You can see the writeup on my approach if you please.


  88. Mark
    Mark Published |

    Great tutorial, really simple to use.

    Have adapted the code a small bit in order to create a tabbed area on a page which people are able to switch between.

    However i would like to know if it is possible using this tutorial to link directly to a specific tab.

  89. 31 Great WordPress jQuery Resources | The Designer's Pod
  90. How To Create WordPress Tabs Using jQuery | jQuery Wisdom
  91. Marty Fried
    Marty Fried Published |

    Thanks for the writeup, but I was disappointed because I saw your div within a div for tab3 and thought it had solved the problem that all other samples had. But alas, it didn’t work.

    I’d guess it’s not that hard to add code to search child divs and process the visibility of all of them, but I was hoping to find a full solution I could use.

    Maybe once I find a solution, and finish my website, I’ll post the code.

  92. Edward Ridding
    Edward Ridding Published |

    Great little tutorial, helped me get my head around tabs.


  93. nhla
    nhla Published |

    thank u sooooooo much, am doing a project and iv struggled with this all day

  94. 30 Tutorials Combining Both WordPress and jQuery | a place to share, bookmarks, resources, css, jquery, photoshop, design, inspiration
  95. James
    James Published |

    a small problem:
    I used you code and everything works fine, except that divs inside the .tabbed div (the content area) do not show up, s, s, and everything else work fine but the divs are hidden. I tried setting the display style in the style sheet but no luck. Any Ideas?

  96. Andy
    Andy Published |

    Hey Justin,

    Thanks for this tutorial, I’ve been playing with the jquery a bit and haven’t been too successful so far, is there an easy change to the jquery to make multiple instances of these tabs work together?


  97. trouble
    trouble Published |


    first of all i am not really PHP expert.

    I am working on a blog website.

    On home page they are looking for recent post to show up.
    on archive page it should be all the collection.

    I was wondering is there any how i can make categories to get data from recent post (which is on the home page) also same content on the archive.
    Please see:

    Here is how i am thinking of getting post from archive and showing it on home page.

    Please give me any help will be appreciated.

    Thank you.

  98. Ethan Miller
    Ethan Miller Published |

    Hi Justin, Nice tutorial. One problem I’m having is that I use s within my tabs. The solution I found was to specify only the first level of elements under the tabbed div, e.g.:

     $(document).ready(function() {
                    // setting the tabs in the sidebar hide and show, setting the current tab
                    $('div.tabbed > div').hide();
                    $('div.tabbed ul.tabs li.t1 a').addClass('tab-current');
                    // SIDEBAR TABS
                    $('section.tabbed ul li a').click(function(){
                            var thisClass = this.className.slice(0,2);
                            $('div.tabbed > div').hide();
                            $('div.' + thisClass).show();
                            $('div.tabbed ul.tabs li a').removeClass('tab-current');

    ( http://stackoverflow.com/questions/977883/selecting-only-first-level-elements-in-jquery )

  99. Samrat Kafle
    Samrat Kafle Published |

    Thanks for sharing really great wordpress tut …helped me a lot ..thanks again.

  100. Peter Kessler WordPress Theme - John B. Hartley
  101. 16 Useful jQuery Tutorials to Enhance your WordPress Site | Wordpress Themes
  102. Cx Rana
    Cx Rana Published |

    hey justin bro,what a nice tutorial… i want to try this for my personal web site. thanks for share.

  103. AspirasiKu
    AspirasiKu Published |

    Yeah, this is what i need, i trying hard to find this site and finally i`ve made to find the elegan tabber for my site. thank you for sharing.

  104. Bookmarks for July 2nd to July 11th | Track 23
  105. Vinit
    Vinit Published |

    hii… i have created 3 forms in three tabs…but getting confused how to connect them with the button event…i want such a page when i clicked on next button of 1 st tab , the 2nd tab must opened… any one have any idea how to do so…if so, do reply…thanks…

  106. Great Tips & Tutorials To Get The Most Out Of WordPress | Creative Verse
  107. Great Tips & Tutorials To Get The Most Out Of WordPress | WordPress Tutorials 101
  108. RajaWine
    RajaWine Published |

    Nice tutorial, i like it. Tq.

  109. Joan
    Joan Published |

    Very usefull, thanks alot.

Comments are closed.