title: Toggle Switch classes -- unexpected behaviour
body: <p>I have a toggle switch, which I am trying to add/remove classes from each button through Javascript. The code for the buttons is:</p>
  
  <pre><code>&lt;div class="btn-group btn-toggle"&gt; 
      &lt;button type="button" class="btn btn-default" data-toggle="collapse" data-target=".upload-video"&gt;Yes&lt;/button&gt;
      &lt;button type="button" class="btn btn-danger active" data-toggle="collapse" data-target=".upload-video"&gt;No&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can get my Javascript to amend the buttons for the first time you click them, by cycling classes on and off in a particular order so as there are never two buttons with the <code>btn-default</code> class at the same time:</p>
  
  <pre><code>$('.btn-toggle').click(function() {
      if ($(this).find('.btn-danger').size()&gt;0) {
          $(this).find('.active').removeClass('active');
          $(this).find('.btn-default').addClass('btn-success');
          $(this).find('.btn-success').removeClass('btn-default');
          $(this).find('.btn-danger').addClass('btn-default');
          $(this).find('.btn-default').removeClass('btn-danger');
          $(this).find('.btn-success').addClass('active');
      }
      if ($(this).find('.btn-success').size()&gt;0) {
  
      }
  
  });
  </code></pre>
  
  <p>However when I try and run the code "in reverse", toggling the switch back the other way, I get seriously unexpected behaviour. Take a look in Chrome's Console and watch the classes react wildly:</p>
  
  <pre><code>$('.btn-toggle').click(function() {
      if ($(this).find('.btn-danger').size()&gt;0) {
          $(this).find('.active').removeClass('active');
          $(this).find('.btn-default').addClass('btn-success');
          $(this).find('.btn-success').removeClass('btn-default');
          $(this).find('.btn-danger').addClass('btn-default');
          $(this).find('.btn-default').removeClass('btn-danger');
          $(this).find('.btn-success').addClass('active');
      }
      if ($(this).find('.btn-success').size()&gt;0) {
          $(this).find('.active').removeClass('active');
          $(this).find('.btn-default').addClass('btn-danger');
          $(this).find('.btn-danger').removeClass('btn-default');
          $(this).find('.btn-success').addClass('btn-default');
          $(this).find('.btn-default').removeClass('btn-success');
          $(this).find('.btn-danger').addClass('active');
      }
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/matthewpeckham/gP562/1/" rel="nofollow">I have created a jsFiddle showing the problem</a>. Is there an easier way to do this? Why am I getting the results that I do? Is Bootstrap's <code>collapse</code> plugin somehow interfering?</p>