JQuery Use Multiple instance in one page

JQuery Use Multiple instance in one page

Multiple function call (Tab) in single page

http://jsfiddle.net/RwPps/


$(document).ready(function() {

$(".myTabs").each(function() {

var $myTabs = $(this);

$myTabs.find(".tab_content").hide().first().show();
$myTabs.find("ul.tabs li:first").addClass("active").show();

$myTabs.find("ul.tabs li").click(function() {
var $this = $(this);

$this.addClass("active").siblings().removeClass("active");
$this.find(".tab_content").hide();

var activeTab = $this.find("a").attr("href");
$(activeTab).fadeIn();

return false;
});
});
});





<div class="myTabs" id="myTabs1">
<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>
</div>

<div class="myTabs" id="myTabs2">
<ul class="tabs">
<li><a href="#tab3">Gallery</a></li>
<li><a href="#tab4">Submit</a></li>
</ul>

<div class="tab_container">
<div id="tab3" class="tab_content">
<!--Content-->
</div>
<div id="tab4" class="tab_content">
<!--Content-->
</div>
</div>
</div>