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.
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 https://startfunction.com/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 […]