bootstrap nav tab trigger toggle by onclick

Question

So I have two nav tab on the top of my page to switch between two views:

<ul class="nav nav-tabs">
  <li class="active"><a data-target="#first-tab" data-toggle="tab">FOO tab</a></li>
  <li><a data-target="#second-tab" data-toggle="tab">BAR Tab</a></li>
</ul>

<div class="tab-pane fade in active" id="first-tab"> [...] </div>
<div class="tab-pane fade in active" id="second-tab"> [...] </div>

Is there a way to toggle between the two pane other than using the tabs? So say I have a button in the first-tab div, when clicked, it will switch to the second-tab div. I want to take away the tabs complete, and use another way to trigger the switch between to pane, e.g. in an onclick function

Answer 1

<div class="tab-content">
  <div class="tab-pane fade in active" id="first-tab">
    <a data-target="#second-tab" data-toggle="tab">BAR Tab</a>
  </div>
  <div class="tab-pane fade" id="second-tab">
    <a data-target="#first-tab" data-toggle="tab">FOO tab</a>
  </div>
</div>

Of course you can, but you made 2 mistakes:

1. Only one div tab can have in active classes.
2. You have to create another div with class of tab-content around tab divs.

CODEPEN

JS version:

('[data-target=#first-tab]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
$('[data-target=#second-tab]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

CODEPEN