Bootstrap .tab('show') not working for my code

Question

Here is my Code on JSFiddle

$('button').click(function() {      $('#passive_order_categories').tab('show');  });

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  <link rel="stylesheet" type="text/css" href="/css/result-light.css">    <button>Click</button>  <div class="tabs-container">      <ul class="nav nav-tabs">          <li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a>          </li>          <li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a>          </li>      </ul>      <div class="tab-content">          <div id="active_order_categories" class="tab-pane active">              <div class="panel-body"></div>          </div>          <div id="passive_order_categories" class="tab-pane">              <div class="panel-body"></div>          </div>      </div>  </div>

Can't figure out why is Bootstrap .tab('show') not working for my code.

Answer 1

From Bootstrap#tabs, what the target to trigger is the tab that we clicked to show the contents, not the content itself.

You should give the second tab that links to the passive_order_categories an id, or use ul.nav-tabs li:eq(1) to get the second li in the list.

Or use a[href="#passive_order_categories"] to get the anchor related to that content page.

Then apply the .tab('show') on it, not on $('#passive_order_categories')

$('button').click(function() {      // Find the target tab li (or anchor) that links to the content you want to show.      $('a[href="#passive_order_categories"]').tab('show');      //$('ul.nav-tabs li:eq(1)').tab('show');  });

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">    <button>Click</button>  <div class="tabs-container">      <ul class="nav nav-tabs">          <li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a>          </li>          <li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a>          </li>      </ul>      <div class="tab-content">          <div id="active_order_categories" class="tab-pane active">              <div class="panel-body"></div>          </div>          <div id="passive_order_categories" class="tab-pane">              <div class="panel-body"></div>          </div>      </div>  </div>