Tabs JavaScript not removing 'active' class from nav-pills nav-stacked

Created by: Gong-Bao-Chicken

Expected Behaviour: When activating a nav-link, the active state gets removed and added to the now active nav-link. Therefore, the active state gets removed and added to the active item. Additionally the content transitions between the current and now active.

Problem: The active class is not being removed from nav-link. Thus each item can only be navigated to once.

Codepen ( UPDATED ) : http://codepen.io/anon/pen/ALRGqj?js-preprocessor=none

I hope the syntax is correct since there is no example in the docs:

<!-- Navigation -->
<nav class="nav nav-pills nav-stacked" role="tablist">
  <a class="nav-link active" data-toggle="pill" role="tab"  href="#profile">Active</a>
  <a class="nav-link" data-toggle="pill" role="tab" href="#buzz">Link</a>
  <a class="nav-link" data-toggle="pill" role="tab" href="#references">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

<!-- Tab panes -->
<div class="tab-content" role="tabpanel">
  <div role="tabpanel" class="tab-pane fade in active" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
  <div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>

edit: May be related to #20039 , but tabs work, pills (stacked) dont