title: How to toggle between bootstrap button classes onClick?
body: <p>I am using Bootstrap buttons and would like them to change color when clicked. For example, the button is originally gray (btn-default) and should change to green (btn-success) on click. I would like the button to change back to the default class when clicked again. So far I have created an if statement and added the following code, however it is only changing color once, and will not return to the default class when clicked again.</p>
  
  <pre><code>$("#critical_btn").click(function () {
  
      if (this.class= 'btn-default'){
          $('#critical_btn').removeClass('btn-default').addClass('btn-success ');
          $(this).addClass('btn-success').removeClass('btn-default');
      }
      else if (this.class= 'btn-success'){
          $('#critical_btn').removeClass('btn-success').addClass('btn-default ');
          $(this).addClass('btn-default').removeClass('btn-success');
      }
      });
  </code></pre>
  
  <p>I am fairly new to this, so any help would be greatly appreciated!</p>