JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="test"></div>

CSS

#test {
    margin: 1em;
    width: 100px;
    height: 100px;
    border: 1px solid;
}

.bounce {background: green;}
.vivify {background: red;}

JavaScript

(function($) {
    $.fn.vivify = function(options) {

        var defaults = {
            animation: 'bounce',
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            var o = options;

            var obj = $(this);

            var animation = o.animation;

            obj.bind("click", function() {
                
                

                obj.toggleClass(o.animation);
                
                if(!obj.hasClass(o.animation)) {
                    
                    obj.toggleClass('vivify');
                } else {
                    
                    obj.removeClass('vivify');
                }
                    
                    
                    
                    
                    

            });
            });
        }
    })(jQuery);



$('#test').vivify();