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 loo

Answer 1

I've edited your code. If you click on an active state in your code, it all messes up. I've added a little if statement which prevents this. Just a contribution if ya'll need the fix. Good work with the code.

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() {
var buttonClasses = ['btn-primary','btn-danger','btn-warning','btn-success','btn-info','btn-inverse'];
var $this = $(this);

    if ($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')) {

        var btnGroup = $this.parent('.btn-group');
        var btnToggleClass = $this.attr('class-toggle');
        var btnCurrentClass = $this.hasAnyClass(buttonClasses);

        if(btnToggleClass!='false'&&btnToggleClass!='btn') {

            if (btnGroup.attr('data-toggle') == 'buttons-radio') {
                var activeButton = btnGroup.find('.btn.active');
                var activeBtnClass = activeButton.hasAnyClass(buttonClasses);

                    activeButton.removeClass(activeBtnClass).addClass(activeButton.attr('class-toggle')).attr('class-toggle',activeBtnClass);               
                    $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass);

            }

            if (btnGroup.attr('data-toggle') == 'buttons-checkbox' || $this.attr('data-toggle') == 'button') {
                $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass);
            }

        }


    }



});    

$.fn.hasAnyClass = function(classesToCheck) {
    for (var i = 0; i < classesToCheck.length; i++) {
        if (this.hasClass(classesToCheck[i])) {
            return classesToCheck[i];
        }
    }
    return false;

Sincerely Another Bootstrap Lover

Answer 2

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

Answer 3

I don't think, that any JS is really necessary. I believe that this can by done purely by CSS and data attributes.

Yes, it involves a little CSS duplication, but still better than sometimes glitchy javascript.

1. Add data attribute data-active-class to button,

2. Add custom CSS for all classes (example of one for readability; colors are taken from already existing classes "primary", "success", and so on)

   .btn.active[data-active-class="primary"] {
       color: #fff;
       background-color: #286090;
       border-color: #204d74;
   }
   

Inactive button will render as usual, active based on data-* attribute will render by this^^ CSS.

JSFiddle with complete CSS

Edit: When using SASS or LESS the colors can/should be used from variables already defined by Bootstrap... that solves the duplicating problem.