JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" style="float: left; width: 100%; height: 92px; background: fuchsia;"></div>
<div id="mainCanvas" style="float: left; width: 100%; background: blue; overflow: auto;">
    <div id="toggle"><img id="expand" alt="" src="img/expand.png"></div>
    <div id="content" style="width: 100%">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
</div>
<div id="legend" style="float: left; width: 100%; height: 140px; background: lime;"></div>
<div id="footer" style="float: left; width: 100%; height: 50px; background: gray;"></div>

CSS

html, body {
    padding: 0;
    margin: 0;
}
img#expand {
    width: 20px;
    cursor: pointer !important;
    margin-left: 7px;
    margin-top: 2px;
}

/* Application Details */
div#toggle {
    left: 95%; 
    top: 92px; 
    width: 34px;
    height: 29px;
    border: 1px solid #ccc;
    background: white;
    padding-top: 5px; 
    position: fixed;
}

JavaScript

var height = $( window ).height();
    var width = $( window ).width();
    canvasHeight = height - 282;
    $("#mainCanvas").css({"height" : canvasHeight});
    $("#header").css({"min-width" : width});
    $("#mainCanvas").css({"min-width" : width});
    $("#legend").css({"min-width" : width});
    $("#footer").css({"min-width" : width});

    $("#toggle").click(function() {
            if($("#mainCanvas").height() != height) {
                $("#header").hide();
                $("#legend").hide();
                $("#footer").hide();
                $("#detail").animate({"top" : '0px'});
                $("#toggle").animate({"top" : '0px'});
                $("#mainCanvas").animate({"height": height}, {"queue": false, "duration": 500}).animate({"width": width}, 500);
                $("#toggle").html('<img id="expand" src="img/collapse.png">');
            }
            else {
                $("#mainCanvas").css('overflow','auto', 'important');
                $("#mainCanvas").animate({"height": canvasHeight}, {"queue": false, "duration": 500}); 
                $("#header").show();
                $("#legend").show();
                $("#footer").show();
                $("#detail").animate({"top" : '92px'});
                $("#toggle").animate({"top" : '92px'});
                $("#toggle").html('<img id="expand" src="img/expand.png">');

              

            }
        }); // End Expand/Collapse