JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script type='text/javascript'>
  
   
    
    
      $("#focus").live("click",function () {
            $('#hidden-item').toggleClass('focused');
    
        });
    
      
     $(":not('.hidden-item')").live("click",function () {
            $('#hidden-item').toggleClass('focused');
        });
    
            
    
    
</script>
<style type="text/css">
#focus { background: #333; color: #fff; padding: 5px; z-index:9999; position:absolute;}
#wrap {

    height:100%;
    width: 100%;    
    position: absolute;
}

#hidden-item {

  background: red; color: #fff;
  position: absolute;
  top: 50px;
  left: 100%;
  width: 100%;
  margin-left:15px;
   

  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}


#hidden-item.focused {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<div id="wrap">
    <div id="focus" >Click to Show/Hide</div>

    <div id="hidden-item">
        Hidden div...
        <br />
        <br /><br /><br /><br /><br />
        Line2
    </div>
</div>
</body>
</html>