JSFiddle - React, Tailwind, and code Playground

by achilles03anil

HTML

<body id="SolidBody">
<div class="topDiv">

<div style="width:40%;float:left;height:32px;text-align:center;">
<label class="styletext" id="MainMessage" >Message Detail</label>
</div>
</div>
<div class="BottomDivContainer">
   <div id="box1" class="box">Div #1dskljfa'ds;
   fasd
   fa
   sd
   fa
   sdfa
   sd
   fa
   sdfa
   sd
   fa
   sd
   fa
   sdf
   a
   sdf
   as
   df
   ads
   f
   asd
   f
   asd
   f
   as
   df
   asd
   f
   asd
   f
   asd
   f
   asd
   f
   asd
   fa
   sdf
   a
   sdf
   as
   df
   as
   df
   asd
   f
   asd
   fa
   sdf
   a
   sdf
   ads
   fasdfasdfasdfasd
   fas
   df
   asdf
   as
   df
   asdfa
   adsf
   asd
   fa
   ssssss
   asdf
   asd
   fa
   sdf
   asd
   fa
   sdfasdfasdfasd
   fasdf
   asd
   fa
   sdf
   ads
   f
   </div>
    <div id="box2" class="box">Div #2</div>
    </div>
</body>

CSS

.topDiv{
    position: fixed;
    top: 0px; width: 100%;
    left:0px; 
    height: 40px;
    background-color:#52c8f0;
    z-index:1
}body {
    padding: 0px;    
}
    .box {
    position: absolute;
    width: 50%;
    word-wrap: break-word;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 50%;
    top: 100px;
    margin-left: -25%;
}

#box1 {
    background-color: green;
   left:-150%;
}

#box2 {
    background-color: yellow;
     height: 300px;
}
  .BottomDivContainer
        {
    position:absolute;
     top:44px;
      width:100%;
      }

JavaScript

var flag=1;
    $('#MainMessage').click(function() {
                if (flag == 2) { //box1
                     $('#box1').animate({ left: '-150%', }, 500 );
                    $('#box2').animate({ left: '50%',}, 500 );
                       $('#box2').css("display", "block");
                    //var ht1= $('#box2').height();
                     //  $('#SolidBody').height(ht2);
                                        flag = 1;

                }
                else if (flag == 1) {  //box2
                $('#box1').animate({left: '50%',}, 500 );
              // $('#box2').animate({left: '150%',}, 500 );
                    
                  //$('#box2').css("left", "150%");
                    $('#box2').css("display", "none");
                // var ht2= $('#box1').height()
                // $('#SolidBody').height(ht2);
                    flag = 2;
                }
            });