Reputation: 4634
Here is some custom tabs we created. The problem I’m having is that when you click one of the parent tabs, it affects the child tabs. Meaning that it removes the .active class from the “active” child tab.
I've started using the :not() jquery selector in which I target a .child-pane class. It is now working but it disables the child tabs. Only the parent tabs work now.
<div class="tab-parent">
<div class="tabs">
<a href="#tabOne" class="tab-link active">Tab One</a>
<a href="#tabTwo" class="tab-link">Tab Two</a>
</div>
<div class="tab-block">
<section class="pane active" id="tabOne">
<h3>Tab One Content</h3>
<div class="tab-parent">
<div class="tabs">
<a href="#childTabOne" class="tab-link">Child Tab One</a>
<a href="#childTabTwo" class="tab-link active">Child Tab Two</a>
</div>
<div class="tab-block">
<section class="pane" id="childTabOne">
Child Tab One
</section>
<section class="pane active" id="childTabTwo">
Child Tab Two
</section>
</div>
</div>
</section>
<section class="pane" id="tabTwo">
...
</section>
</div>
</div>
My jQuery code:
function tabAction(e) {
e.preventDefault();
var activeTab = $(this).attr('href');
var thisNav = $(this).closest('.tab-parent > .tabs').find($('.tab-link'));
var thisBlock = $(this).closest('.tab-parent').find($('.pane:not(.child-pane)'));
thisBlock.each(function () {
$(this).removeClass('active');
});
thisNav.each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
$(activeTab).addClass('active');
}
$('.tab-link').on('click', tabAction);
I have created a plunkr. Notice what happens to child tabs when you toggle on the parent tags.
Upvotes: 0
Views: 237
Reputation: 553
From the parent, you want the first tab-block and that first tab-blocks first level sections
var thisBlock = $(this).closest('.tab-parent').find('> .tab-block > section');
Plus you can just to this for selecting the clicked link
var thisNav = $(e.delegateTarget);
Upvotes: 1