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"> <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?
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. 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 113 comments! Add yours.
Leave a comment
Stock Files for sale on GraphicRiver
I am just much impressed by your web layout, simply awesome. Love your posts too. Subscribed by rss, Keep rocking
Thank you for your kind words.
I am much impressed by your rss icon too… I would just say WOOOOHHHH!!!! about your rss icon. love much.
The icon fading is created using the same principles than this jQuery tutorial on icon fading.
Great work Elliot:)
I’m hopeful that you might know how to implement the jQuery tabs in Magento, specifically the product view page?
Cheers!
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
Thanks this may be really useful to me in the future.
Cool, I’m glad it’s useful. I’m really loving the Art Direction plugin fro WordPress, what do you guys think about it?
Thanks ! Very short, clear and effective.
Great tutorial.
Easier to integrate and customize than ui tabs.
It’s been very helpfull.
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.
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.
@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é
René, check the new tutorial I’ve added http://www.ilovecolors.com.ar/select-reveal-jquery/
Thank you Elliot, I think that you saved lot of my time.
@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.
René, just use the selector
.htabs h2 a
apply the .selected class to it and you’re good to go
[...] jQuery Tabs made easy [...]
Can you please tell me how to change the appearance of the active tab
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?
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.
How i can replace fadein with slide in this?
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.
Strange but this didn’t work. Panel slide down and only then text appear.
My bad. I found error. I didn’t set “float:left” to tab-panel class. Thank you, great blog.
You’re welcome, come back any time! I’m glad that you got it working =)
[...] Sample | Tutorial Share and [...]
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.
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!
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?
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!!
wow! I liked this design very much
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.
[...] ilovecolors [...]
Your design looks very much like the one of Webdesigner Wall. BTW, nice post!
[...] 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 [...]
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!
Hi Lawrence, yes, I think it would be possible to do so. Maybe I can post a tutorial about doing it tomorrow. =)
Thanks Elliot!
Im gonna try using your code for my project. WIll be developing the page today
Lawrence, the new article feturing rotating jQuery tabs is up!
This is really very good Site… Thanks
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??
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.
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!
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.
Really great! thanks, a lot!
you’re very welcome
The simplest yet most effective explanation thank you very much…
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.
[...] SIMPLE JQUERY TABS III [...]
[...] jQuery Tabs made easy Categories: jQuery Tags:jQuery, tabs Kommentarer (0) Trackbacks (0) Skriv en kommentar Trackback [...]
{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}.
[...] Tabs Made Easy [...]
Amazing! i also looking for that things. It is simple jquery tabs.
jQuery tabs are an easy way to add more content to your site when you don’t have enough space.
[...] 4. jQuery Tabs made easy [...]
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?
Neonreiter, you might want to use the tutorial that supersedes this one
Rotating jQuery Tabs.
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.
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
[...] share wit the community?TabsJQuery Tools: Tabs Done RightTabContainerjQuery UI TabsBookmarkable TabsTabs Made EasyToolTipsJQuery Tools: Tooltips Done RightThe JQuery TooltipqTipClueTipAJAX TooltipSlidersJQuery [...]
Great tutorial! Thank you!
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.
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.
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.
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.
@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: http://jquery-howto.blogspot.com/2009/02/font-cleartype-problems-with-fadein-and.html
Thanks for a great code…
Thanks Mercury for sharing this fix. It’s a very easy and elegant solution to IE7′s rendering issue.
[...] 11.jQuery Tabs made easy The Demo Visit the tutorial [...]
[...] Download jQuery Tab [...]
Can u send the CSS plz?
[...] The Demo Visit the tutorial [...]
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!
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.
@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
[...] jQuery Tabs made easy [...]
[...] View Tutorial – View Demo [...]
[...] 9. Create Bounce out Vertical menu with jQuery [...]
[...] Visit the tutorial [...]
Thanks for the article!!
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.
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
[...] jQuery Tabs made easy Demo || Download You can leave a response below, or trackback from your own site. [...]
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.
Thanks Luis! I suggest you to look into the more recent version of the tabs code which contains more features.
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.
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.
I concur, If you wish Yahoo to acknowledge your site and not blacklist it you better pay extra attention to their guidelines.
[...] 9. jQuery Tabs Made Easy [...]
I need it. Thanks a lot
[...] 9. Create Bounce out Vertical menu with jQuery [...]
[...] 9. Create Bounce out Vertical menu with jQuery [...]
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 ?
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.
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.
Thank you so much. I found something and forgot to tell it here.
Thank you again
Can i find all the code. I can’t find it in the preview..
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.
How to add an active state to the selected tab?
i also added a basic jquery tab tutorial also discussed about fouc issue
http://fundapass.blogspot.in/2012/06/v-behaviorurldefaultvmlo_22.html
do you any idea how to mix up jquery tab with an AJAX Tab Container ?
regards
http://www.uobabylon.edu.iq
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!
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!
hey there and thank you for your info I have definitely picked up something new from right here.
I did however expertise some technical points using this
site, as I experienced to reload the site many times previous to I could get it to load correctly.
I had been wondering if your web hosting is OK?
Not that I am complaining, but slow loading instances
times will sometimes affect your placement in google and
can damage your quality score if ads and marketing with Adwords.
Anyway I’m adding this RSS to my e-mail and could look out for much more of your respective interesting content. Make sure you update this again very soon.
Wonderful blog! I found it while surfing around on Yahoo News.
Do you have any tips on how to get listed in Yahoo News?
I’ve been trying for a while but I never seem to get there! Cheers
This is my first time pay a visit at here and i am truly impressed
to read all at alone place.
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.
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.
Nice discussion. I have sometimes found it hard to
find someone arrested. This link: inmate search that kind of pointed me in the right
trajectory for my search.
Enjoying the service of Odyssey – Streaming – Radio is so
easy. Often, long term schedules with a bit of breathing room work best.
Another radio commercial production tip to chew on is to make sure the audio
quality is excellent on any spot your produce.
It bears mentioning that there are also games and
simulations available to those wanting to learn to trade stock index futures.
The only downside of it in a lot of people’s eyes is the fact that there is no multiplayer content. Harry Potter Hogwarts is one more entry into this new series of LEGO board games.
But with Nexus Radio the only settings you have to worry about
are where you want to save your files and what file type you want to save
it as. Next, build a list of prospects and develop a relationship with those
prospects on your list. Many people will be happy with replaceable batteries for home use and occasional
outings.
It’s great that you are getting thoughts from this paragraph as well as from our argument made at this place.
My site :: bed bug killer spray