JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<div style="height:3em;">
<span id="nav">do it</span>  
</div>
<div id="container">
    <div id="mainPanel" class="transition">
       
    </div> 
    <did id="over">
        
    </div>    
</div>
 
<div style="display:none">
    <div id="content1" style="background:#eef">test test test test test test test test test test
    test test test test test test test test test test
    test test test test test test test test test test</div>
    <div id="content2" style="background:#efe">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
</div>

CSS

#nav {cursor:pointer; padding:3em;  
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
}

#container {position:relative;}

#mainPanel {
    position:absolute; left:0; top:0; width:200px; height:200px;
    border:#444 1px solid;
}

#over {
    position:absolute; left:210px; top:0; width:200px; height:200px;
    z-index:-1; 
    opacity:0.5;
}

.transparent { opacity: 0.0; }
.opaque { opacity: 1.0; }

.transition {
    -webkit-transition: opacity 2.5s ease-in-out;
    -moz-transition: opacity 2.5s ease-in-out;
    transition: opacity 2.5s ease-in-out;
}

JavaScript

var $c = [$('#content1').detach(), $('#content2').detach()];
var idx = 0;
//$('#mainPanel').append($c[0]);

$('#nav').click(function(){    
    
    $('#mainPanel').removeClass('opaque transition').addClass('transparent');
    

    $('#mainPanel > div').detach().appendTo('#over');
    $c[idx%2].detach().appendTo($('#mainPanel'));    
    $('#mainPanel').addClass('transition');
    setTimeout(function() {
        $('#mainPanel').addClass('opaque').removeClass('transparent'); 
    }, 1);
    
    
    idx++;
});