JSFiddle - React, Tailwind, and code Playground

by orolo

JavaScript

//i want to offer the user this functionality
//$("#someDiv").rioToggle({
//    on: function() {
//        doStuff();
//    },
//    off: function() {
//        doDifferentStuff();
//    }
//
//"on" should only be fired when $('#toggle-on').hasClass('dimmed');
//"off" should only be fired when $('#toggle-off').hasClass('dimmed');
//how do i write callbacks like that in a plugin?


(function($){
    $.fn.rioToggle = function() {
          var onSide = '<span id="toggle-on" class="rio-toggle dimmed">On</span>';
          var offSide = '<span id="toggle-off" class="rio-toggle">Off</span>';
    
        return this.each(function() {
             $(this).after(onSide + offSide);
              $('#toggle-on, #toggle-off').mousedown(function() {
                $('#toggle-on, #toggle-off').toggleClass('dimmed', 50);
             });
        });
                 
    }
})(jQuery);