CODEWITHSUNDEEP
jquerytabsnested
iChido
iChido

Reputation: 4634

Targeting Child Tabs Within Custom Nested Tabs

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.

Plunkr Sample

Upvotes: 0

Views: 237

Answers (1)

joseph.l.hunsaker
joseph.l.hunsaker

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

Related Questions