StudentX StudentX - 5 months ago 72
jQuery Question

Show tab content on button click not working in bootstrap

Why my solution is not working ?

<html lang="en">
<head>
<title>Tabs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>

<body>

<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a id="checkout-tab" href="#checkout" aria-controls="checkout" role="tab" data-toggle="tab">Shopping Cart</a></li>
<li role="presentation"><a id="billing-tab" href="#billing" aria-controls="billing" role="tab">Billing Details</a></li>
<li role="presentation"><a id="payment-tab" href="#payment" aria-controls="payment" role="tab">Payment</a></li>
</ul>

<div class="cart-patagonia">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active checkout-cart-wrap" id="checkout">
Checkout
</div>
<div role="tabpanel" class="tab-pane fade" id="billing">
Billing
</div>
<div role="tabpanel" class="tab-pane fade" id="payment">
Payment
</div>
</div>
</div>

<br><br><br><br><br><br>

<a id="next" class="btn btn-default btn-lg shopping-cart-navigation-button pull-right" role="button">Next <span class="glyphicon glyphicon-chevron-right"></span></a>
<a id="previous" class="btn btn-default btn-lg shopping-cart-navigation-button hidden pull-right" role="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</a>
</div>
</div>
</div>


<script>
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;
}
});
</script>


</body>

</html>

Answer

You don't have to manually remove the bootstrap's classes.

The correct way to show the required tab by name is as follows:

$('.nav-tabs a[href="#billing"]').tab('show');

where a[href="#billing"] is the tab link which we want to open programmatically.

var $cartCounter = 1;
$(document).ready(function() {
  $('#next').click(function(e) {
    e.preventDefault();
    if ($cartCounter === 1) {
      $('.nav-tabs a[href="#billing"]').tab('show');
      $('#previous').removeClass('hidden');
      $cartCounter = 2;

    } else if ($cartCounter === 2) {
      $('.nav-tabs a[href="#payment"]').tab('show');
      $('#next').addClass('hidden'); //add hidden class to the next button
      $cartCounter = 3;
    } else {
      return false;
    }
  });


  
  $('#previous').click(function(e) {
    e.preventDefault();
    if ($cartCounter === 3) {
      $('.nav-tabs a[href="#billing"]').tab('show');
      $('#next').removeClass('hidden'); //remove hidden class from the next button
      $cartCounter = 2;
    } else if ($cartCounter === 2) {
      $('.nav-tabs a[href="#checkout"]').tab('show');
      $('#previous').addClass('hidden'); //add hidden class to the previous button
      $cartCounter = 1;
    } else {
      return false;
    }
  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a id="checkout-tab" href="#checkout" aria-controls="checkout" role="tab" data-toggle="tab">Shopping Cart</a>
        </li>
        <li role="presentation"><a id="billing-tab" href="#billing" aria-controls="billing" role="tab">Billing Details</a>
        </li>
        <li role="presentation"><a id="payment-tab" href="#payment" aria-controls="payment" role="tab">Payment</a>
        </li>
      </ul>

      <div class="cart-patagonia">
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade in active checkout-cart-wrap" id="checkout">
            Checkout
          </div>
          <div role="tabpanel" class="tab-pane fade" id="billing">
            Billing
          </div>
          <div role="tabpanel" class="tab-pane fade" id="payment">
            Payment
          </div>
        </div>
      </div>

      <br>
      <br>
      <br>
      <br>
      <br>
      <br>

      <a id="next" class="btn btn-default btn-lg shopping-cart-navigation-button pull-right" role="button">Next <span class="glyphicon glyphicon-chevron-right"></span></a>
      <a id="previous" class="btn btn-default btn-lg shopping-cart-navigation-button hidden pull-right" role="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</a>
    </div>
  </div>
</div>