Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

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.

Cоmmеnts (48):
  1. 1

    Very pretty blog! I LOVE the 3d and transparency effects! Congratulation, really.

  2. 2

    its relay good ……..

  3. 3

    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.

  4. 6

    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

    • 7

      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.

  5. 8

    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?

  6. 10

    Perfect! with best regards from Tehran!

  7. 11

    Really cool. thanks.

  8. 12

    Very nice script! It works great with all my websites.

    really perfect.

    regards from Germany

    thanks

  9. 13
    @
    Hussain Ahmed said:

    hello,
    i need very simple jquery tabs, simple and easy code.
    plzzzzzz help.
    thanks

  10. 14
    @
    patrick said:

    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.

  11. 15

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

  12. 17

    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 .

  13. 19

    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?

  14. 21

    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?

  15. 25

    Very nice. But Is it possible to activate a tab whith an anchor and a link like destination tab ?

    Thak for your help

  16. 27

    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…

  17. 29

    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.

  18. 31

    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?

  19. 33

    i tried but it didnt work.. any other idea?

  20. 35

    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

  21. 37

    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

  22. 42

    This is a fantastic script. Thank you very much.

  23. 43

    The problem with page jumping is fixed, script is updated.

  24. 44

    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

  25. 45

    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?

  26. 47

    hello, great thanks,
    how can i add a slide to all tabs like this:

Lеаvе а Соmmеnt

© 2009–2014 Dimox.net  •  Privacy Policy