JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<button class="btn btn-info" data-toggle="button" class-toggle="btn-success">Single Toggle</button>
<div class="padding"></div>
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-small" class-toggle="btn-info">btn-group 1</div>
<div class="btn btn-small" class-toggle="btn-success">btn-group 2</div>
<div class="btn btn-small" class-toggle="btn-warning">btn-group 3</div>
<div class="btn btn-small" class-toggle="btn-danger">btn-group 4</div>
</div>
<div class="padding"></div>
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-info" class-toggle="btn-success">Yes</button>
<button class="btn btn-danger active" class-toggle="btn-info">No</button>
<button class="btn btn-info" class-toggle="btn-warning">Maybe</button>
</div>
CSS
.padding{padding:20px;}
JavaScript
$('.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 (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);
}
});
$.fn.hasAnyClass = function(classesToCheck) {
for (var i = 0; i < classesToCheck.length; i++) {
if (this.hasClass(classesToCheck[i])) {
return classesToCheck[i];
}
}
return false;
}