CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
gene b.
gene b.

Reputation: 12050

Deactivate Toggle Buttons

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?

Upvotes: 3

Views: 1209

Answers (3)

Dhruv Saxena
Dhruv Saxena

Reputation: 1346

$('.btn').on('click', function(e) {
    e.preventDefault();
    $(this).siblings().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>

<div class="btn-group">
      <button type="button" class="btn btn-primary">Tab 4</button>
      <button type="button" class="btn btn-primary">Tab 5</button>
      <button type="button" class="btn btn-primary">Tab 6</button>
</div>

Just adding one small tweak to Alexandru's original answer...

In case there were multiple button groups within the page, then to isolate the select / deselect events, and to ascertain that those button groups don't interfere with each other, we could modify the code slightly as follows:

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


The only new line added here is: $(this).siblings().removeClass('active') such that it removes any of the previously added active class from the current button group only.

Upvotes: 1

Alvaro
Alvaro

Reputation: 9682

Additionally to @Alexandru-IonutMihai answer, if you want to do it one line you could select the active button and the just-clicked button and toggle their classes.

var $btn = $('.btn-group .btn');

$btn.click(function(e) {

  e.preventDefault();

  $(this).add($btn.filter('.active')).toggleClass('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>

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

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>

Upvotes: 3

Related Questions