JSFiddle - React, Tailwind, and code Playground

by rahulkumarpawar

HTML

<html>
    <head></head>
<body>
<div><table><tr><td align="right"><label id="hide"> hide </label><label id="show"> show </label></td></tr></table></div>
<table>
<tr>
    <td style="height:100%"><iframe name="leftFrame" id="leftFrame" src="navigation.jsp" height="600" width="200" frameborder="0"></iframe></td>

    <td style="height:100%"><iframe name="mainFrame" id="mainFrame" src="http://www.yahoo.com"  height="600" width="1100" frameborder="0" scrolling="auto" on> </iframe></td>
</tr>        
</tr>    

</table>
    
</body>
</html>

JavaScript

$(document).ready(function() {
$("#hide").click(function () {
$("#leftFrame").hide(500);
var docWidth = $(document).width();

$("#mainFrame").css('width', docWidth);

});
$("#show").click(function () {

$("#leftFrame").show(500);
$("#mainFrame").css('width', 1100);

});
});