Best Bootstrap Select

by Behseini

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="panel panel-default">
    <div class="panel-heading">Switch</div>
    <div class="panel-body">
        <div class="row">
           <div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10">
                <button id="ecolomodelno" class="btn btn-primary switchshow norightradius col-lg-1 col-md-1 col-sm-2 col-xs-3">No</button>
                <button id="ecolomodel" class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-8 col-xs-9">New Model</button>
                <button id="ecolomodelyes" class="btn btn-primary switchhiden noleftradius col-lg-1 col-md-1 col-sm-2 col-xs-3">Yes</button>
           </div>
        </div>
    </div>
</div>

CSS

/* CSS used here will be applied after bootstrap.css */
.switch{padding:0px; overflow:hidden !important;}
.noleftradius{ border-top-left-radius:0px;border-bottom-left-radius:0px;}
.norightradius{border-top-right-radius:0px;border-bottom-right-radius:0px;}
.noradius{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
  .switchhiden{display:none;}
.switchshow{display:block;}

JavaScript

$("#ecolomodel").on("click",function(){
   $("#ecolomodelno").toggleClass("switchshow switchhiden");
   $("#ecolomodelyes").toggleClass("switchhiden switchshow");
  
});