Javascript/Jquery Toggle Active Class Between 2 Buttons on a Button Group

Javascript / JQuery Toggle Active Class between 2 buttons on a button group

Use:

$('.btn-group').on('click', '.btn', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

I think the code is fairly self-explanatory? It simply removes any existing "active" classes from the siblings of the button you clicked, and adds that class to the clicked button.

Here's a working snippet:

$('.btn-group').on('click', '.btn', function() {  $(this).addClass('active').siblings().removeClass('active');});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div class="btn-group btn-group-sm" role="group">  <div type="button" class="btn btn-default btn-1">Button 1</div>  <div type="button" class="btn btn-default btn-2 active">Button 2</div></div>

How to toggle active class in two button and hide div using jQuery?

  • Use a .is-active (with the appropriate CSS) for both your buttons and forms
  • Cache your forms in a variable
  • Use the data-* attribute (i.e: data-target in the example below) to store the desired selector you want to target on click

jQuery(($) => {

  const $actForms = $(".custom-register");
  const $actFormsBtns = $(".activate-form");

  $actFormsBtns.on("click", function() {
    $actFormsBtns.add($actForms).removeClass("is-active");
    $(this).add($(this.dataset.target)).addClass("is-active");
  });
  
});
.activate-form.is-active { background: #0bf; }

.custom-register            { display: none; }
.custom-register.is-active { display: block; }
<button type="button" data-target="#normal-user-form" class="btn btn-light activate-form is-active" >form1</button>
<button type="button" data-target="#business-user-form" class="btn btn-light activate-form" data-target="">form2</button>

<form id="normal-user-form" class="custom-register is-active">form1</form>
<form id="business-user-form" class="custom-register">form2</form>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Toggle active class on a button but maintain state of other buttons

You can run some conditional work for your input to add and remove class on the input you click:

$( "input" ).click(function() {
        var $this = $(this);
   
        if ($this.hasClass("active")) {
            $this.removeClass("active");
        } else {
            $this.addClass("active");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
 <!-- Button 1 -->
 <input type="button" name="btn1" class="filter-btn active">

 <!-- Button 2 -->
 <input type="button" name="btn2" class="filter-btn">

 <!-- Button 3 -->
 <input type="button" name="btn3" class="filter-btn active">

 <!-- Button 4 -->
 <input type="button" name="btn4" class="filter-btn">

jQuery toggle classes between buttons in Bootstrap Button Group; set one and unset the other where other is not set

You are doing unnecessary code.. Just add

$(".trueFalseButtonOn").removeClass("trueFalseButtonOn");
$(this).addClass("trueFalseButtonOn");

lines to your both true and false button click event.

In below snippet, I have added new code and commented your code.

$("button[id$='_Resolved_Button'").on('click', function () {   // Get the field value...   var fieldName = $(this).prop("id");   console.log("button_Resolved_Button - fieldName = " + fieldName);   var fieldIndex = fieldName.indexOf("_Resolved");   console.log("button_Resolved_Button - fieldIndex = " + fieldIndex);   fieldName = fieldName.substring(0, fieldIndex);   console.log("button_Resolved_Button - fieldName = " + fieldName);   var fieldID = "input[name='" + fieldName + "']";   console.log("button_Resolved_Button - fieldID = " + fieldID);   var currentValue = $(fieldID).val();   console.log("button_Resolved_Button - currentValue = " + currentValue);
   if(currentValue == "resolved") {    // Set to nothing...    $(fieldID).val("");   } else {    // Set the field...    $(fieldID).val("resolved");   }      $(this).toggleClass("resolveButtonOff resolveButtonOn");  });   $("button[id$='_True_Button'").on('click', function () {   // Get the field value...   var fieldName = $(this).prop("id");      var fieldIndex = fieldName.indexOf("_True");   fieldName = fieldName.substring(0, fieldIndex);   console.log("button_True_Button - fieldName = " + fieldName);   var fieldID = "input[name='" + fieldName + "']";   console.log("button_True_Button - fieldID = " + fieldID);   var currentValue = $(fieldID).val();   console.log("button_True_Button - currentValue = " + currentValue);         $(".trueFalseButtonOn").removeClass("trueFalseButtonOn");      $(this).addClass("trueFalseButtonOn");    $(fieldID).val("true");   // Need to check the value...   /*if(currentValue == "" || currentValue == null) {    // Just toggle...    $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");    // Set the field...    $(fieldID).val("true");   }         if(currentValue == "true") {    // Just toggle...    $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");    // Set to nothing...    $(fieldID).val("");   }   if(currentValue == "false") {    // Unclick/unset the False button...    var buttonID = $(this).prop("id");    var otherButtonID = buttonID.replace("True", "False");    console.log("button_True_Button - otherButtonID = " + otherButtonID);    $(otherButtonID).removeClass("trueFalseButtonOn");    $(otherButtonID).addClass("trueFalseButtonOff");    //$(buttonID).click();    // Set the field...    $(fieldID).val("true");    // Toggle the class...    $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");   }   if(currentValue == "resolved") {    // Do nothing?   }*/  });   $("button[id$='_False_Button'").on('click', function () {   // Get the field value...   var fieldName = $(this).prop("id");   var fieldIndex = fieldName.indexOf("_False");   fieldName = fieldName.substring(0, fieldIndex);   console.log("button_True_Button - fieldName = " + fieldName);   var fieldID = "input[name='" + fieldName + "']";   console.log("button_False_Button - fieldID = " + fieldID);   var currentValue = $(fieldID).val();   console.log("button_False_Button - currentValue = " + currentValue);         $(".trueFalseButtonOn").removeClass("trueFalseButtonOn");      $(this).addClass("trueFalseButtonOn");    $(fieldID).val("false");   // Need to check the value...   /*if(currentValue == "" || currentValue == null) {    // Just toggle...    $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");    // Set the field...    $(fieldID).val("false");   }   if(currentValue == "true") {    // Unclick/unset the False button...    var buttonID = $(this).prop("id");    buttonID = buttonID.replace("True", "False");    var otherButtonID = buttonID.replace("False", "True");    console.log("button_True_Button - otherButtonID = " + otherButtonID);    $(otherButtonID).removeClass("trueFalseButtonOn");    $(otherButtonID).addClass("trueFalseButtonOff");    // Set the field...    $(fieldID).val("false");    // Toggle the class...    $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");   }   if(currentValue == "false") {    // Just toggle...    $(this).toggleClass("trueFalseButtonOff trueFalseButtonOn");    // Set to nothing...    $(fieldID).val("");   }   if(currentValue == "resolved") {    // Do nothing?   }*/  });
.squareUpButton {    border-radius:0px;   }   .resolveButtonOff {    background-color: #FFFFFF;    border: 1px solid #00953a;    color: #00953a !important;    font-size: 8pt;    padding: 7px;   }   .resolveButtonOn {    background-color: #00953a;    border: 1px solid #00953a;    color: #FFFFFF !important;    font-size: 8pt;    padding: 7px;   }   .trueFalseButtonOff {    background-color: #FFFFFF;    border: 1px solid #005980;    color: #005980 !important;    font-size: 8pt;    padding: 7px;   }   .trueFalseButtonOn {    background-color: #005980;    border: 1px solid #005980;    color: #FFFFFF !important;    font-size: 8pt;    padding: 7px;   }   .remedyButtonR:not (:last-child) {    border-right: none;   }
<html> <head>  <title>Button Test</title>  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </head> <body>  <div class="container">   <div class="row">    <div class="col-sm-2">     <div class="btn-group" style="width:100%">      <button id="house_Rules_True_Button" type="button" class="btn squareUpButton trueFalseButtonOff" style="width:50%;">TRUE</button>      <button id="house_Rules_False_Button" type="button" class="btn squareUpButton trueFalseButtonOff" style="width:50%;">FALSE</button>     </div>     <div class="btn-group" style="width:100%">      <button id="house_Rules_Resolved_Button" type="button" class="btn squareUpButton resolveButtonOff" style="width:99.5%;">RESOLVED</button>     </div>     <input name="house_Rules">    </div>   </div>  </div> </body></html>

Button toggle-class remains active upon pressing another button

You simply add one line in your first callback for each button to remove active class from any active button.

$('#ButtonA').toggle(function() {
    $('button.active').click(); // Remove active class from any active button.
    // you may adapt 'button.active' to select the proper buttons
    $('#ButtonA').addClass("active");
}, function() {
    $('#ButtonA').removeClass("active");
});​


But, use only one block of code for all the buttons, like this;

$('#ButtonA, #ButtonB, #ButtonC').toggle(function() { // this refer to the just clicked button.
    $('button.active').click(); // Remove active class from all other buttons.
    $(this).addClass("active");
}, function() {
    $(this).removeClass("active");
});

instead of copying and pasting.

See http://jsfiddle.net/fNtPP/1/ for a clean refactored code showing an example with 3 buttons.

Remove active class from bootstrap button group

use $(window).on('load', function() {}) to achieve this. It will work. One more issue is you are checked the check box by default, so it's taken as active class for the button group.

$(window).on('load', function() {
        $('.btn-group').find('.btn-outline-secondary').removeClass('active');
    });
<html lang="en">
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group rounded-pill" data-toggle="buttons">
        <label class="btn btn-outline-secondary btn-md active rounded-left">
                        <input type="radio" name="options" id="option1" value="cadpaymentform" checked> <b>Purchase</b>
                    </label>
        <label class="btn btn-outline-secondary rounded-right btn-md">
                        <input type="radio" name="options" id="option2" value="license"> <b>My license key</b>
                    </label>
      </div>
  

</body>
</html>

Related Topics

Is There a Performance Difference Between the Sx Prop and the Makestyles Function in Material Ui

How to Fix Chart Legends Width-Height with Overflow Scroll in Chartjs

Cannot Apply Any Bootstrap Style in Using React-Bootstrap Library

How to Position a React Component Relative to Its Parent

Getting the Height of an Option Element with JavaScript

Slow Response When the HTML Table Is Big

I Need List of All Class Name of Font-Awesome

Auto Image Resize Based on Browser Window Dimensions

Pure CSS Close Button

Custom Cursor Interaction Point - CSS/Jquery

How to Make JavaScript Scrollintoview Smooth

Force Address Bar to Show in Mobile Chrome App

Fading Visibility of Element Using Jquery

Adding to Script Bundle from Partial View in .Net MVC 5

Jquery Selector Optimization

Div Vertical Scroll Bar on Left

How to Get the HTML Source from the Page

How to Increase Width of Morris.Js Bar or Add Space Between Bars


Leave a reply



Submit