JSFiddle - React, Tailwind, and code Playground

by vapocalypse

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);

    });
    console.log($("#mainFrame"));
    console.log($("#mainFrame")[0].contentDocument);
    console.log($("#mainFrame")[0].contentDocument.body);
});