JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div><a href="#" id="btn-bk">Go back to frontpage</a></div>
<div><a href="#" id="btn-product">Show product div hide bank div</a></div>

<div id="product">Product Div</div>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

CSS

#bank {display:none;}
#btn-bk {display:none;}
#product {display:none;}
#btn-product {display:none;}

JavaScript

$('#btn').click(function(e){    
    $('#fancy, #btn').fadeOut('slow', function(){
        $('#bank, #btn-bk, #btn-product').fadeIn('slow');
    });
});

$('#btn-bk').click(function(e){    
    $('#bank, #btn-bk, #btn-product, #product').fadeOut('slow', function(){
        $('#fancy, #btn').fadeIn('slow');
    });
});

$('#btn-product').click(function(e){    
    $('#bank, #btn-bk, #btn-product').fadeOut('slow', function(){
        $('#product, #btn-bk').fadeIn('slow');
    });
});