I am having a problem with nested tabs. When I click on Tab 2 I need Nested 1 to display by default. Instead it just shows a blank tab until I click Nested 2 and click back to Nested 1.
I'd love to be able to fix this by just adding something to the ready function if possible because changing the actual .js file is a pain... Thanks in advanace!
HTML:
<!--Begin Tabs-->
<div id="tab-container1">
<ul class="tabs">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3" rel="external-4.html">Tab 3</a></li>
</ul>
<div class="tab-panel">
<div id="tab-1">Tab 1 Content</div>
<div id="tab-2">
<!--BEGIN NESTED TABS-->
<div class="tab-carousel">
<div id="tab1-N">
<ul id="ul-N" class="tabs-nested">
<li><a href="#tab1-a" rel="external-1.html">Nested 1</a></li>
<li><a href="#tab1-b" rel="external-2.html">Nested 2</a></li>
<li><a href="#tab1-c" rel="external-3.html">Nested 3</a></li>
</ul>
<div class="tab-panel-nested">
<div id="tab1-a">Nested Tab One Content</div>
<div id="tab1-b">Nested Tab Two Content</div>
<div id="tab1-c">Nested Tab Three Content</div>
</div>
</div>
</div>
<!--END NESTED TABS-->
</div>
<div id="tab-3">Tab 3 Content</div>
</div>
</div>
<!--End Tabs-->
<script type="text/javascript">
jQuery(document).ready(function(){
$('#tab-container1 ul').tabs();
});
</script>
JS:
jQuery.fn.tabs = function () {
return this.each(function () {
var ul = jQuery(this);
ul.find('a[href^=#]').each(function (i) {
var tablink = jQuery(this);
if (i) {
jQuery(tablink.attr('href')).hide();
}
else {
tablink.addClass('current');
}
tablink.click(function () {
jQuery(ul.find('a.current').removeClass('current').attr('href')).hide();
jQuery(tablink.addClass('current').attr('href')).show();
if(tablink.attr('rel')){
$("#tab-preloader").show();
$.ajax(
{
url: tablink.attr('rel'),
cache: false,
success: function(message)
{
jQuery(tablink.attr('href')).empty().append(message);
$("#tab-preloader").hide();
}
});
};
return false;
});
});
});
};