JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<p>stuff</p>
<div class="wrap">  
  <img src="http://intranet.hp.com/marketing/Marketinghome/admin/_experience/img/preloader32x32.gif" class="cat-loader" alt="loading" />
</div>
<p>stuff</p>

CSS

.wrap{
 border-top:1px solid #EBEBEB; 
 border-bottom:1px solid #EBEBEB; 
 display:none;
 overflow:hidden;
}

.wrap img{
  display:block;
  margin:50px auto;  
}

JavaScript

$("p").click(function(){

  $(".wrap").slideDown(150, function(){
  
    $(".wrap").css("height",$(".wrap").height()+"px")
    
    setTimeout(function(){
      
     $(".wrap").html("<p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>");
      $(".wrap").animate({height:$(".wrap")[0].scrollHeight + "px"}, 150, function(){ $(".wrap").css("height","auto") });
      
    },800);
      
  });  
  
});