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