JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<span id="rioToggle"></span>
<div id="output"></div>

CSS

/*
* jquery.rioToggle.js CSS
*/
#rioToggle {
    color: #ffffff;
    background-color: #3AB8F2;
    border-radius: 5px;
    font-family: Arial, "MS Trebuchet", sans-serif;
    size: 14px;
    padding: 2px;
}

#rioToggle:hover {
    cursor: pointer;
}

#toggle-on {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-right: 5px;
}

#toggle-off {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    margin-left: 1px;
    padding-right: 5px;
}

#toggle-off::selection, #toggle-on::selection {
    background: transparent;
}

.dimmed {
    background-color: #FFFFFF !important;
    color: #FFFFFF !important;
    border-radius: 5px !important;
    position: relative;
}

JavaScript

(function($) {
    $.fn.rioToggle = function(options) {
        var opts = $.extend({}, $.fn.rioToggle.defaults, options);
        var onSide = '<span id="toggle-on" class="rio-toggle dimmed">' + opts.leftText + '</span>';
        var offSide = '<span id="toggle-off" class="rio-toggle">' + opts.rightText + '</span>';

        return this.each(function() {
            $(this).html(onSide + offSide);

            $('#rioToggle').mousedown(function() {
                $('#toggle-on, #toggle-off').toggleClass('dimmed');
                
                if ($("#toggle-on").hasClass('dimmed') === false) {
                    opts.on();
                }

                else if ($("#toggle-on").hasClass('dimmed') === true) {
                    opts.off();
                }

            });
        });


    };
})(jQuery);

jQuery.fn.rioToggle.defaults = {
    leftText: "On",
    rightText: "Off",
    on: function(click) {
        $('#output').html("default: on");
    },
    off: function(click) {
        $('#output').html("default: off");
    }
};

$('#rioToggle').rioToggle({
    leftText: "foo",
    rightText: "bar",
    'on': function() {
        $('#output').html("callback: on");
    },
    'off': function() {
        $('#output').html("callback: off");
    }
});