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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

(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').hide().end().find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });
 
})
})(jQuery)

HTML code for the script

It very similar on a structure of HTML code of another jQuery tabs solutions, which I was seen:

1
2
3
4
5
6
7
8
9
10
11
12

<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

1
2
3
4
5
6

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