JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div id="outer">
            <div id="1"><img src="images/1.jpg"></div>
</div>

CSS

#outer{
    width:500px;
    height:500px;
    border: solid 2px;
    overflow:hidden;
}
img{
    width:500px;
    height:500px;
}

JavaScript

var imgCount = 8;
 $('#outer').click(function(){
     //$('#loading').html('<img src="loading.gif"> loading...');
     var currChildCount = $('#outer').children().length;
     if(currChildCount < imgCount){
         var imgId = (currChildCount+1);
         $('#outer').append("<div id='"+imgId+"'><img/></div>");
         $('#'+imgId).find('img').attr('src','images/'+imgId+'.jpg').load
         (function() {
             $('#'+currChildCount).slideUp('slow');
         });
         
     }
     
 });