JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#test
{
     width: 400px;
 height: 400px;
 background-image:url("http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg");   
}

JavaScript

function toggle() {
    if ($(this).is(".open")) {
        $(this).animate({
            width: 400
        }, 500);
    }
    else {
        $(this).animate({
            width: $(this).data("width")
        }, 500);
    }
    $(this).toggleClass("open");
}
$("#test").click(function() {
  
    if (!$(this).data("width")) {
        var img = new Image();
        var _this = $(this);
        
        img.onload = function() {
            
            _this.data("width", this.width);
            toggle.call(_this);
        }
        img.src = $(this).css("backgroundImage").replace("url(\"", "").replace("\")", "");
    } else {
        toggle.call(this);
    }
});