Simple JQuery Tabs

JQuery tabs. Whenever I start any new project tabs is something which I have to use, so instead of using any external js library I created a small function.

---

[html]
<div id="tabs">
<div class="divTabs"> <!-- divTabs class is important, this will be passed in function -->
<div id="tab_menu_1" class="tab selected first">PHP</div>
<div id="tab_menu_2" class="tab last">JQUERY</div>
</div>
<div class="divTabs-container">
<div id="divTabs_tab_content_1" class="tabcontent" style="display:block;">Content 1</div>
<div id="divTabs_tab_content_2" class="tabcontent">Content 2</div>
</div>
</div>
[/html]

---

First we are creating a div with a class name, this class name is really important. This class name will be passed in entire tabs, just check the class naming of the div in the above html. It is prefixed with other classes.

CSS is simple just make the .tabcontent{display:none;}

Now time for js function

---

[js]
function generateTabs(element) {
jQuery(function($) {
$("."+element+" .tab[id^=tab_menu]").click(function() {
var currentDiv=$(this);
$("."+element+" .tab[id^=tab_menu]").removeClass("selected");
currentDiv.addClass("selected");
var index=currentDiv.attr("id").split("tab_menu_")[1];
$("."+element+"-container .tabcontent").css('display','none');
$("."+element+"-container #"+element+"_tab_content_"+index).fadeIn();
});
});
}
[/js]

---

Now call this function by passing the classname.
generateTabs('divTabs');

Check the demo below

---