JSFiddle - React, Tailwind, and code Playground

by absentik

HTML

<button>Toggle test</button>

CSS

button {
    width: 200px;
    height: 34px;
    cursor: pointer;
    padding: 5px;
    background: #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    font: 14px Verdana;
    color: #777777;
}

.on {
    background: #99ff99;
}

.off {
    background: #ff9999;
}

JavaScript

function switch_on() {
    $(this).removeClass("off").addClass("on").text("On");
    $(this).one("click", switch_off);
}

function switch_off() {
    $(this).removeClass("on").addClass("off").text("Off");
    $(this).one("click", switch_on);
}

$(document).ready(function() {
    switch_on.call($("button"));
});