JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="box"></div>

<div class="box" data-width="300"></div>

<div class="box" data-height="100" data-width="40"></div>

CSS

body { margin: 20px; }

.box {
	width: 20px;
    height: 20px;
    float: left;
    clear: both;
    margin: 20px;
    border: 1px solid #999;
}

.active {
    border: 1px solid green;
}

JavaScript

$(document).ready(function() {

    $('.box').togglebox({
    
        clickEvent: function() {
            var obj = $(this),
                objD = obj.data(),
                arClass = objD.active ? 'addClass' : 'removeClass';
            
            $(this)[ arClass ]('active'); 
            
        }
    
    });

});

(function($) {
  $.fn.extend({
    togglebox: function( options ) {
      
      var defaults = {
          width: 100,
          height: false,
          clickEvent: function() {}
      };
        
      return this.each(function() {

        var obj = $(this),
            objD = obj.data(),
            o = $.extend( true, {}, defaults, options, objD ),
            objW = obj.width();

        obj.data({ "active": false });    

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

            obj.data({ "active": ( !objD.active ? true : false ) });            
            
            var ani = {};

            o.width && ( ani.width = objD.active ? o.width : objW );
            o.height && ( ani.height = objD.active ? o.height : objW );

            obj.stop().animate( ani , 400 );

            o.clickEvent.call( obj );
            
        });

                    
      });  

    }
  });
})(jQuery);