title: Show tab content on button click not working in bootstrap
body: <p>Why my solution is not working ?</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Tabs&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;ul class="nav nav-tabs" role="tablist"&gt;
                  &lt;li role="presentation" class="active"&gt;&lt;a id="checkout-tab" href="#checkout" aria-controls="checkout" role="tab" data-toggle="tab"&gt;Shopping Cart&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a id="billing-tab" href="#billing" aria-controls="billing" role="tab"&gt;Billing Details&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a id="payment-tab" href="#payment" aria-controls="payment" role="tab"&gt;Payment&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div class="cart-patagonia"&gt;
                  &lt;div class="tab-content"&gt;
                      &lt;div role="tabpanel" class="tab-pane fade in active checkout-cart-wrap" id="checkout"&gt;
                          Checkout
                      &lt;/div&gt;
                      &lt;div role="tabpanel" class="tab-pane fade" id="billing"&gt;
                          Billing
                      &lt;/div&gt;
                      &lt;div role="tabpanel" class="tab-pane fade" id="payment"&gt;
                      Payment
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
              &lt;a id="next" class="btn btn-default btn-lg shopping-cart-navigation-button pull-right"  role="button"&gt;Next &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a id="previous" class="btn btn-default btn-lg shopping-cart-navigation-button hidden pull-right" role="button"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt; Previous&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  var $cartCounter = 1;
  
  $ ( '#next' ).click ( function ( e ) {
      e.preventDefault (  );
      if ( $cartCounter === 1 )
      {
          $ ( '#billing-tab' ).attr ( 'data-toggle','tab' );  //add data attribute data-toggle to the next(billing) tab
          $ ( '#billing' ).tab ( 'show' );                    //show the next(billing) tab content
          $ ( '#checkout-tab' ).removeAttr ( 'data-toggle' );      //remove data attribute data-toggle from the current tba so that it is not clickable
          $ ( '#previous' ).removeClass ( 'hidden' );          //remove hidden class from the previous button
          $cartCounter = 2;
  
      }
      else if ( $cartCounter === 2 )
      {
          $ ( '#payment-tab' ).attr ( 'data-toggle','tab' );     //add data attribute data-toggle to the next(payment) tab
          $ ( '#payment' ).tab ( 'show' );                    //show the next(payment) tab content
          $ ( '#billing-tab' ).removeAttr ( 'data-toggle' );   //remove data attribute data-toggle from the current tab so that it is not clickable
          $ ( '#next' ).addClass ( 'hidden' );                 //add hidden class to the next button
          $cartCounter = 3;
      }
      else
      {
          return false;
      }
  });
  
  
  
  $ ( '#previous' ).click ( function ( e ) {
      e.preventDefault (  );
      if ( $cartCounter === 3 )
      {
          $ ( '#billing-tab' ).attr ( 'data-toggle','tab' );     //add data attribute data-toggle to the previous(billing) tab
          $ ( '#billing' ).tab ( 'show' );                    //show the previous(billing) tab content
          $ ( '#payment-tab' ).removeAttr ( 'data-toggle' );   //remove data attribute data-toggle from the current tab so that it is not clickable
          $ ( '#next' ).removeClass ( 'hidden' );              //remove hidden class from the next button
          $cartCounter = 2;
      }
      else if ( $cartCounter === 2 )
      {
          $ ( '#checkout-tab' ).attr ( 'data-toggle','tab' );    //add data attribute data-toggle to the previous(checkout) tab
          $ ( '#checkout' ).tab ( 'show' );                   //show the previous(checkout) tab content
          $ ( '#billing-tab' ).removeAttr ( 'data-toggle' );   //remove data attribute data-toggle from the current tab so that it is not clickable
          $ ( '#previous' ).addClass ( 'hidden' );             //add hidden class to the previous button
          $cartCounter = 1;
      }
      else
      {
          return false;
      }
  });
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>