JSFiddle - React, Tailwind, and code Playground

HTML

<div id="b" href="this is your URL">click me to hide when i get data</div>

<br/><br/>

<div id="content">nothing to see here</div>

JavaScript

$(function(){

    $('#b').click(function(){
        $.ajax({
            
          //i had to create another test fiddle to overcome the 'same origin' issues
          url: 'http://fiddle.jshell.net/K6YPD/show/',
          success: function(data) {             
          
              //we have the data now
              $('#content').fadeOut(1500, function() {
                //this is a callback once the element has finished hiding
                
                  //populate the div with whatever was returned from the ajax call
                  $('#content').html(stripHTML(data));
                  //fade in with new content
                  $("#content").fadeIn(1500);
              });
                            
          }
        });
        
    });

});



//i'm removing the HTML because otherwise the element gets added as BLOCK, which will be instantly visible and you will not get the 'fadeIn' look
function stripHTML(html)
{
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent||tmp.innerText;
}