CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Thassa
Thassa

Reputation: 542

Bootstrap 3: Nested tabs disappear when another tab is made active

https://jsfiddle.net/Miega/Lmn1490b/

I'm attempting to program a nested tab display using Bootstrap and some extra jQuery. Whenever I try to select another item inside the "Unit Selection" category, the content vanishes. However, the content DOES load if you switch over to another tab that isn't nested.

The jQuery code in question:

$('#unitTabs').on('click', 'a[data-toggle="tab"]', function(e) {
      e.preventDefault();

      var $link = $(this);

      if (!$link.parent().hasClass('active')) {

        //remove active class from other tab-panes
        $('.tab-content:not(.' + $link.attr('href').replace('#','') + ') .tab-pane').removeClass('active');

        // click first submenu tab for active section
        $('a[href="' + $link.attr('href') + '_all"][data-toggle="tab"]').click();

        // activate tab-pane for active section
        $('.tab-content.' + $link.attr('href').replace('#','') + ' .tab-pane:first').addClass('active');
      }
});

Any help is greatly appreciated.

Upvotes: 0

Views: 479

Answers (1)

taha
taha

Reputation: 1017

$('#unitTabs').on('click', 'a[data-toggle="tab"]', function(e) {
  e.preventDefault();

  var $link = $(this);
  var $parent = $link.parent();
  if (!$parent.hasClass('active')) {
    $parent.addClass('active');
    $parent.siblings().removeClass('active')

    $('#unit .tab-pane').removeClass('active')
    $($link.attr('href')).addClass('active')
  }
});

JSFiddle

Upvotes: 1

Related Questions