Toggle Twitter Bootstrap button class when active

Question

In twitter bootstrap, I was looking for a way to allow a button to be the default color when not active. Once a button is active, I wanted to change the color of it. I looked at ways of doing it with the js file that was provided. I ended up writting a little script to handle this.

Answer 1

By adding class-toggle as an attribute to the button equaling what you would like to go to once the button is pressed and adding the following jQuery, you will get the result described above.

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() {

        if($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')){
            var btnGroup = $(this).parent('.btn-group');

            if(btnGroup.attr('data-toggle') == 'buttons-radio') {
                btnGroup.find('.btn').each(function() {
                    $(this).removeClass($(this).attr('class-toggle'));
                });
                $(this).addClass($(this).attr('class-toggle'));
            }

            if(btnGroup.attr('data-toggle') == 'buttons-checkbox' || $(this).attr('data-toggle') == 'button') {
                if($(this).hasClass('active')) {
                    $(this).removeClass($(this).attr('class-toggle'));
                } else {
                    $(this).addClass($(this).attr('class-toggle'));
                }
             }

          }


      });

Then the button would look like

<button class="btn" data-toggle="button" class-toggle="btn-inverse">Single Toggle</button>

If you want to do it with a button group as well it works the same way. Just add the class-toggle to each button in the group.

The jsfiddle

UPDATE

I have modified and created a gist to have a better response when starting you button with a class. Toggle Twitter Bootstrap Classes

UPDATE

I have made a change to fix the bug that appears when you click on an active radio button

Find it here