Deactivate Toggle Buttons

Question

Very simple I just need a quick pointer,

Bootstrap Button Group (for a 1-in-3 toggle button) defined as:

    <!--  Twitter Bootstrap Button Group -->
     <div class="btn-group">
      <button type="button" class="btn btn-primary">General</button>
      <button type="button" class="btn btn-primary">Tab 2</button>
      <button type="button" class="btn btn-primary">Tab 3</button>
    </div>  

On clicking a button I select it to keep it active/pressed: that's my current tab, but I need to unselect all others. Only 1 toggle button at a time.

   $('.btn').click(function(e) {
        e.preventDefault();
        $(this).addClass('active');
    })
// this never unselects other toggle buttons

Also, how would I define the content under each toggle button?

Answer 1

You have to remove active class from previous button(which was selected previous) using removeClass() method.

 $('.btn').click(function(e) {
    e.preventDefault();
    $('.btn-group > button.active').removeClass('active');
    $(this).addClass('active');
 })

$('.btn').click(function(e) {
        e.preventDefault();
        $('.btn-group > button.active').removeClass('active');
        $(this).addClass('active');
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
      <button type="button" class="btn btn-primary">General</button>
      <button type="button" class="btn btn-primary">Tab 2</button>
      <button type="button" class="btn btn-primary">Tab 3</button>
</div>