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

Question

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.

Answer 1

$('#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