How To Hide a Frame With JavaScript

By Ben Sinclair
2005-04-28

How to Hide a Frame with JavaScript

This tutorial will teach you to hide a frame within a frameset.

1. First of all you need to add a name to your frameset so that the JavaScript can identify it:

<frameset cols="200,*" border="0" name="FrameName">     

<frame name="left" src="left.php" target="right"></frame>

<frame name="right" src="right.php" target="_self"></frame>

</frameset>

Change FrameName to anything you wish.

2. Now you need to add this code inbetween the <head> tags in one of the <frame> pages:

<script language="JavaScript">

<!--

function HideFrame()

{

top.FrameName.cols = "0,*";

}

-->

</script>

Again change FrameName to whatever to named the frameset.

3. Last of all in the same document you added the JavaScript to, add a link like this:

<a href="#" onClick="javascript:HideFrame()" target="_self">Hide This Frame!</a>

That's it! Click the Hide Frame link and watch your frame disappear!

Enjoy!

Tutorial Pages:
» How to Hide a Frame with JavaScript

Related Tutorials:
» JavaScript Debugging Techniques with Firebug
» Striped Tables Using JavaScript
» Opening PDFs in a New Window with JavaScript
» Essential Javascript -- A Javascript Tutorial
» Submit Forms Conditionally using JavaScript
» How to Setup a Randomising Function