stackOverFlow_102

HTML

<body>  

<div id="cabecera">
    <a href="javascript:change('contacto.html');"><button style="float:right; margin-right:49px;" type="button" name="btn_der" value="" class="menu_principal" id="btn_der">CONTACT</button></a>
    <button style="float:right;" type="button" name="" value="" class="menu_principal" id="procuctsButton">PRODUCTS</button>
    <button style="float:right;" type="button" name="" value="" class="menu_principal" id="homeButton">HOME</button>
</div>

<div id="cuerpo" style="display: none;">
    <div id="content">
        We have some really great Products.
        Look at our awsome table of products.
        <table border="1">
            <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
            </tr>
            <tr>
            <td>row 2, cell 1</td>    
            <td>row 2, cell 2</td>
            </tr>
            </table>
    </div> 
</div>
<div id="tablet" class="reflect" style="display: none;">
    <iframe id ="myFrame" src="http://www.ge.com/" > </iframe>
   <img src="http://placehold.it/50x50" class="reflect">
</div>

    </body>

CSS

#myFrame{
	width:100%;
	height:100%;
	z-index:;
}

JavaScript

$("#homeButton").click(function () {
     $("#cuerpo").show() ;
     $("#tablet").hide() ;

});
                           
$("#procuctsButton").click(function () {
     $("#tablet").show() ;
     $("#cuerpo").hide() ;
});