Onclick show / hide divs and add / Remove Class for tab colors

Onclick show / hide divs and add / Remove Class for tab colors




<script src="getfile path........jquery-2.1.1.min.js"></script>
<style>
.active{ color:red;}</style>
<script>

$(document).ready( function() {
  $("#searchcarttext").click(function(){
     
         $("#newcart2").hide();
          $("#searchcart2").show();  
           $(".cartpop a.active").removeClass('active');  
           $(this ).addClass('active');
    });
} );


$(document).ready( function() {
  $("#newcarttext").click(function(){
      
         $("#newcart2").show();
          $("#searchcart2").hide();
       $(".cartpop a.active").removeClass('active');  
          $(this).addClass('active');
    });
} );

</script>


<div class="row modal-header " style="margin-bottom:18px; line-height: 25px; padding: 4px; font-weight: bold; font-size: 16px; display:none;">Cart Details</div>


<div class="row cartpop"><a href="#" class="active"  onclick="newcart();" id="newcarttext"><i class="glyphicon glyphicon-shopping-cart"></i>New&nbsp;User</a>&nbsp;&nbsp;&nbsp;<a href="#" onclick="searchcart();" id="searchcarttext"><i class="glyphicon glyphicon-search"></i>Search Old Cart</a></div>
 <div class="row" id="newcart2">
   
      <div class="col-md-12 col-lg-12   col-sm-12 col-xs-12">
          
             <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Mobile Number</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Mobile Number" id="mobile_number_cart" name="mobile_number_cart" onkeypress="return isNumberKey(event)" autocomplete="off" maxlength="10" class="form-control"></div>
  
  
    </div></div>
              <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Customer Name</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Customer Name" id="customer_name_cart" name="customer_name_cart"  autocomplete="off"  class="form-control"></div>
  
  
    </div></div>
             <div class="row">
        <div class="col-md-6 col-md-offset-6 col-lg-6 col-lg-offset-6  col-sm-12 col-xs-12   form-group">
            <input type="button" name="getotp_btn" value="Continue Selling" class="btn btn-default Ipay_btn2" onclick="checkreg()"></div>
    </div></div>
</div>

<div class="row" id="searchcart2" style="display:none;">
   
      <div class="col-md-12 col-lg-12   col-sm-12 col-xs-12">
          
             <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Mobile Number</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Mobile Number" id="mobile_number_cart" name="mobile_number_cart" onkeypress="return isNumberKey(event)" autocomplete="off" maxlength="10" class="form-control"></div>
  
  
    </div></div>
             
             <div class="row">
        <div class="col-md-6 col-md-offset-6 col-lg-6 col-lg-offset-6  col-sm-12 col-xs-12   form-group">
            <input type="button" name="getotp_btn" value="Continue Selling" class="btn btn-default Ipay_btn2" onclick="checkreg()"></div>
    </div></div>
</div>





</div>