JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="container">
<div class="message-window">Here I am !</div>
<div class="red-box">Fixed div</div>
</div>


<a href="#" class="photo-details-messages" style="position:absolute; top:400px">Show/hide Slide Panel</a>

CSS

body {margin:0;}

#container{
  width:100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.red-box, .message-window {
    height:350px;
}

.red-box {
    width: 100%;
    background: red;
    z-index:1;
    position:absolute;
}

.message-window {
    width:100%;
    z-index:2;
    position:absolute;
    left:100%;
    background:#f90;
    color:#000;
}

JavaScript

$(document).ready(function(){
    $('.photo-details-messages').click(function(){
    var hidden = $('.message-window');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"100%"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0"}, "slow").addClass('visible');
    }
    });
});