<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="btn-group-vertical" role="group" aria-label="Basic example"> <button type="button" class="btn btn-outline-secondary">A - Answering Machine</button> <button type="button" class="btn btn-outline-secondary">B - Busy</button> <button type="button" class="btn btn-outline-secondary">CALLBK - Agendar nova cha. *</button> <button type="button" class="btn btn-outline-secondary">DAIR - Dead Air</button> <button type="button" class="btn btn-outline-secondary">DC - Disconnected Number</button> </div><div class="btn-group-vertical" role="group" aria-label="Basic example"> <button type="button" class="btn btn-outline-secondary">DEC - Venda recusada</button> <button type="button" class="btn btn-outline-secondary">DNC - NAO LIGAR MAIS</button> <button type="button" class="btn btn-outline-secondary">N - No Answer</button> <button type="button" class="btn btn-outline-secondary">NI - Sem interesse</button> </div><div class="btn-group-vertical" role="group" aria-label="Basic example"> <button type="button" class="btn btn-outline-secondary">NP - Sem PitchPreço</button> <button type="button" class="btn btn-outline-secondary">SALE - SucessoMarc.</button> <button type="button" class="btn btn-outline-secondary">XFER - Tras. Supervisor</button> </div>

.btn-group-vertical { border-radius: 0px; } .btn-group-vertical .btn { border-radius: 0px; } .btn-group-vertical + .btn-group-vertical { margin-left: -1px; }

$(".btn").on("click", function() { $(".btn").toggleClass("active", false); $(this).toggleClass("active", true); console.log("button clicked"); });