JSFiddle - React, Tailwind, and code Playground

by Couto

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<button class="btn"><i class="icon-ok"></i> Click me!</button>
<button class="btn btn-inverse"><i class="icon-ok icon-white"></i> Click me!</button>

CSS

body {
    padding: 40px;
}

JavaScript

var Events = function() {
    var cache = {};
    return {
        on: function() {},
        off: function() {},
        trigger: function() {}
    };
},
    ToggleButton = function(element) {
        var evts = Events(),
            el = element,
            toggled = false,
            toggle = function() {
                var currenClass = el.getAttribute('class');
                toggled = !toggled;

                if (toggled) {
                    el.setAttribute('class', currenClass + ' active');
                } else {
                    el.setAttribute('class', currenClass.replace('active', ''));
                }
            };

        el.addEventListener('click', toggle);

        return {
            toggle: toggle,
            on: evts.on,
            off: evts.off,
            trigger: evts.trigger
        };
    };


var button = document.querySelectorAll('button');

var toggledButton = ToggleButton(button[0]),
    toggledButton2 = ToggleButton(button[1]);

setTimeout(toggledButton2.toggle, 200);
setTimeout(toggledButton2.toggle, 1000);
setTimeout(toggledButton2.toggle, 2000);