CODEWITHSUNDEEP
javascripttwitter-bootstrap-3
gman plex
gman plex

Reputation: 39

Toggle one button at at time Bootstrap

I've been playing with this for the last hour and can't seem to figure out how to have one button toggle at a time. Also trying to have the button change to different color So if I click button1 it toggles. If I then click button2, then button1 untoggles and button2 toggles. Here's what I have so far

<div class="Demo-boot" style="padding:30px;">
 <button type="button" class="btn btn-primary" data-toggle="button">Button1</button>
       <button type="button" class="btn btn-primary" data-toggle="button">Button2</button>
  </div>

Here it is in action: http://www.bootply.com/MaxkTJs3HH

Upvotes: 0

Views: 1488

Answers (2)

cport1
cport1

Reputation: 1160

You need to set it up in a button group like this::

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Button 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Button 2
  </label>
</div>

Upvotes: 1

blairmeister
blairmeister

Reputation: 915

first add some ids to the buttons

<div class="Demo-boot" style="padding:30px;">
  <button id="button_one" type="button" class="btn btn-primary" data-toggle="button">Button1</button>
  <button id="button_two" type="button" class="btn btn-primary" data-toggle="button">Button2</button>
</div>

Next add some jquery 

$('#button_one').click(function (e) {
    $('#button_two').removeClass('active')
});

$('#button_two').click(function (e) {
    $('#button_one').removeClass('active')
});

the running product : http://www.bootply.com/tT4yYWxjyk

Upvotes: 0

Related Questions