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