Simplest Universal jQuery Tabs Script
My experience with jQuery for today is about 2 years. I began to learn this nice framework after I found somewhere in Internet a script, which lets to create a tabbed blocks.
During this 2 years I gained my experience in jQuery and created my own jQuery Tabs Script completely from scratch. And I want to share it with you in this post.
I call it an universal, because it lets to create an unlimited number of tabbed blocks with an unlimited number of tabs, while the contents of the script remains unchanged (script size is only 0.4 kilobytes).
jQuery Tabs Script code
In my opinion, I’ve made a miniature and pretty jQuery script for a tabs:
(function($) { $(function() { $('ul.tabs').each(function() { $(this).find('li').each(function(i) { $(this).click(function(){ $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').eq(i).fadeIn(150).siblings('div.box').hide(); }); }); }); }) })(jQuery)
The following script doing the same as the code above, but this script is yet smaller (note that it require jQuery at least version 1.4.2):
(function($) { $(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide(); }) }) })(jQuery)
HTML code for the script
It very similar on a structure of HTML code of another jQuery tabs solutions, which I was seen:
<div class="section"> <ul class="tabs"> <li class="current">First Tab</li> <li>Second Tab</li> </ul> <div class="box visible"> Content of the first block </div> <div class="box"> Content of the second block </div> </div><!-- .section -->
Requied CSS for this HTML
.box { display: none; } .box.visible { display: block; }
The .box
class hides all tabbed blocks by default, but the .visible
shows the desired block.
P.S.. Yes, perhaps I invented the wheel, but i get great pleasure from this process and simultaneously improve my experience in jQuery, and I don’t think this is so bad.
Very pretty blog! I LOVE the 3d and transparency effects! Congratulation, really.
its relay good ……..
How to prevent jumping to top, if the tab is in the middle of content, in other word, if i click the tab, its scroll to top. I think this bug is really annoying.
Unfortunately, I don’t know how =(
event.preventDefault();
This not helps.
return false;
inside the .click callback function.Hi Dimox..
i have found another way to add or create Tabs for my wordpress sidebar widget here at justintadlock blog.
What i want to ask is : Can you tell me which one is the simplest and the lightest one to implement in my wordpress blog, between your code and the one that justin made.
Thanks dimox.
Thanks for your
Way that you describe, I have used before. My method is more versatile. And I have yet more smaller version of my script. Will write about it soon.
I am using your great script for a tabbed box on the search results page in wordpress. Each tab shows the search results for different categories. As there is a lot of content, each tab also has pagination. My problem is that all the tabs remember the same pagination, so if in tab 1 I go to page 2, then in tab 2 it also goes to page 2. Do you have any thoughts on how I can fix this, or is it really a wordpress problem?
Most likely you doing something wrong in your PHP code. I can’t help anything.
Perfect! with best regards from Tehran!
Really cool. thanks.
Very nice script! It works great with all my websites.
really perfect.
regards from Germany
thanks
hello,
i need very simple jquery tabs, simple and easy code.
plzzzzzz help.
thanks
hello there,
thank you for the script; I’d like to ask you if is possible add a timer to auto_switch tabs.
Thank You for answer me.
hello,
I have included Image in a tab content. After switching among tabs that image does not display again. Can you help me plz…..??? you can check at http://g7webs.com/nkkothari/goal_based_investment.html
thanks in advance…..
For me it displayed after switching.
you got a regular……..reader truely man……….i m a freelance and have interest in web designing .
i like your article very much. you have nice tutorial……straight to the point .
Thanks, welcome! ;)
Small issue. In IE7 when I come to a page that has the tabs, it shows up completely blank until I click on the page, then it shows up. Any idea what might be causing this?
I don’t know, but the reason exactly not in this script.
Hi, I’m using this tab system, but I can’t put another div inside of the tabs, that show me an error. Is there some way to do it?
Show me an example of the code.
Very nice. But Is it possible to activate a tab whith an anchor and a link like destination tab ?
Thak for your help
No. I don’t see a sense in this.
Excuses-me..i think my english is to bad…I want just :
If i have a link anywhere on the page (like
<a href="#anchor" rel="nofollow">Destination in tab3</a>
for a content in tab3 with this name (<a>The anchor</a>
, juste activate the tab3 to be visible when i click on the link…That’s not possible with this script.
Argh..Thank-you Dimox for your quick answer.
Did you indicate to me a simple but good script tab javascript for do that. I precis that i have multi menus tab in the same page..
Thanks.
Sorry, I don’t know such a script.
Hello, thank you for this good script…
I have created tabs, but when i put google map inside the tab ( not the first one but others ) google map doesnt show correctly, its gray screen and i see little piece of the map..
Do u have any idea how to fix this?
May be you need to specify the height for
div.box
, where located the code of google map.i tried but it didnt work.. any other idea?
Sorry, don’t know.
Hi , This is a Wonderful Script. ……I was wondering, cant i have the regular tabs within the vertical tab script? Snippet of what i want is shown below…
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
<!--SMALL TAB BLOCK STARTS-->
smalltab1
smalltab2
<!--Tab 1 Content box starts-->
smalltab 1 content
<!--Tab 1 Content box ends-->
<!--Tab 2 Content box starts-->
smalltab 2 content
<!--Tab 2 Content box ends-->
<!--SMALL TAB BLOCK ENDS-->
Tab2 Content
Tab3 Content
Tab4 Content
Tab5 Content
At the same time I want the multiple tabs feature on the page which is working gr8. But when i try nesting like in the above code snippet, it does not work. Can u please provide a solution for the same. Any help is appreciated. Thanks a lot
Here is the solution – http://jsfiddle.net/Dimox/9htM5/
first of all i must thank you , nice and a great script , its what i was looking for , fast , lite , supports ie 6 , but can you help me out on this jumping screening thing , whenever i am in the middle of the page and click on the tabs it scrolls to the top of the page each and everytime , can you help with that
I’m still seeking a solution for this. Unfortunately I don’t know how to fix this.
hey dimox , i found a solution to the problem , fortunately it was using your code only from this comment using this code made it work perfect like a charm
Then I think I not understood your problem.
my problem was with the scrolling , when clicked on the tabs it seems to move at the top of the page , i used the new code and everything seems to be fine , you can check it out over here LINK
This is a fantastic script. Thank you very much.
The problem with page jumping is fixed, script is updated.
Could you tell me how to change the javascript (or html) so that I can get one of the tabs to act as a link – and not open a content box? If I add
Actually please ignore the above.. what I really want to do is be able to nest the vertical inside the horizontal tabs.. can you tell me how to do it?
Here is the example.
hello, great thanks,
how can i add a slide to all tabs like this:
You need to find another script for that.
Hello. Can you tell me how can i disable the click on second tab?
In other script i can use
and that works fine but i do not know how to apply it to your code. Thanks
Try this: