I am using bootstrap with btn-group. There is the html:

<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>

Button 2 it already active.

Currently I'm doing this to remove the active class from one and add it to another.

$('.btn-2').removeClass('active');
$('.btn-1').addClass('active');

Is this the cleanest way to do this or is there a better way so it can just toggle this active class between the two buttons?

I am using bootstrap with btn-group. There is the html:

<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>

Button 2 it already active.

Currently I'm doing this to remove the active class from one and add it to another.

$('.btn-2').removeClass('active');
$('.btn-1').addClass('active');

Is this the cleanest way to do this or is there a better way so it can just toggle this active class between the two buttons?

• javascript
• jquery
• css
• twitter-bootstrap

1 Answer 1

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>