JSFiddle - React, Tailwind, and code Playground

HTML

<div id="t-loader"></div>


<div class="media load-fixed active"> 
    Load Fixed
</div>
<br />
<div class="media load-extra"> 
    Load Extra
</div>



<br />
<div class="fixed-ads">
FIXED ADS IN HERE!!			
</div>


<div style="display: none;" class="extra-ads">
EXTRA ADS IN HERE!!	
</div>

CSS

body{
    color:black;
    
}
.fixed-ads{
    background:green;
    
}
.extra-ads{
    background:green;
    
}

JavaScript

var showTimer = null;
$('.load-extra').click(function() {
			$(this).addClass('active');
			$('.load-fixed').removeClass('active');
			$('.fixed-ads').hide();
			$('#t-loader').show().html('loader');
    
			clearTimeout(showTimer);
			showTimer = setTimeout(
			  function() 
			  {
			  	$('#t-loader').hide();
			    $('.extra-ads').show();
			  }, 2000);
			
			
		});
		$('.load-fixed').click(function() {
			$(this).addClass('active');
			$('.load-extra').removeClass('active');
			$('.extra-ads').hide();
			$('#t-loader').show().html('loader');
            
            clearTimeout(showTimer);
			showTimer = setTimeout(
			  function() 
			  {
			  	$('#t-loader').hide();
			    $('.fixed-ads').show();
			  }, 2000);
		});