NOTE: Its a solution but I need some feedback on more possibilities of achieving this I have 2 iframes. Say ifrm1 and ifrm2 I want to hide the buttons in ifrm1 and ifrm2 from the main page whereas the ifrm2 is in ifrm1. and ifrm1 is on main page (Mainpage.php) "MainPage.php" <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" language="javascript"> function HideLogin() { window.frames['ifrm1'].document.getElementById("contentBtn").style.display= "none"; window.frames['ifrm1'].window.frames['ifrm2'].document.getElementById("testiframeBtn").style.display= "none"; } </script> </head> <body> <input type="submit" onclick="HideLogin()" /> <iframe src="content.php" name="ifrm1" id="ifrm1"></iframe> </body> </html> HTML: "content.php" <html> <body >content.php <input type="submit" name="contentBtn" id="contentBtn" /> <iframe src="testiframe.php" name="ifrm2" id="ifrm2"></iframe> </body> </html> HTML: "testiframe.php" <html> <body > testiframe.php <input type="submit" name="testiframeBtn" id="testiframeBtn" /> <p>Frame Contents</p> </body> </html> HTML: i have used various combinations but this works well: window.frames['ifrm1'].document.getElementById("contentBtn").style.display= "none"; window.frames['ifrm1'].window.frames['ifrm2'].document.getElementById("testiframeBtn").style.display= "none"; Code (markup): the nested iframe functionality can be achieved in the same way e.g. window.frames['ifrm1'].window.frames['ifrm2'].window.frames['ifrm3'].document.getElementById("XXXBtn").style.display= "none"; //to hide the 2nd iframe window.frames['ifrm1'].document.getElementById("ifrm2").style.display= "none"; //to hide the 3rd iframe window.frames['ifrm1'].window.frames['ifrm2'].document.getElementById("ifrm3").style.display= "none"; Code (markup): if you know any other possible combinations than dont forget to post them.