JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div><a href="#" id="btn">Show Back</a></div>
<div><a href="#" id="btn-bk">Show Fancy</a></div>
<div><a href="#" id="btn-cc">Show Cart</a></div>
<div><a href="#" id="btn-tt">Show Tasty</a></div>
<br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
<div id="cart">Cart Div</div>
<div id="tasty">Tasty Div</div>

CSS

#bank {display:none;}

JavaScript

$('#btn').hover(function(e){    
    $('#fancy').stop(true, true).fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
        $('#tasty, #cart').hide();
    });
});

    
$('#btn-bk').hover(function(e){    
    $('#bank').stop(true, true).fadeOut('slow', function(){
        $('#fancy').fadeIn('slow');
        $('#tasty, #cart').hide();
    });
});

$('#btn-cc').hover(function(e){    
    $('#tasty').stop(true, true).fadeOut('slow', function(){
        $('#cart').fadeIn('slow');
        $('#fancy, #bank').hide();
    });
});

    
$('#btn-tt').hover(function(e){    
    $('#cart').stop(true, true).fadeOut('slow', function(){
        $('#tasty').fadeIn('slow');
        $('#fancy, #bank').hide();
    });
});