Completely Hide frame in framesets using Javascript or Jquery

Question

Please go thorough below HTML files code.
Here I am trying to use toggle function of jQuery. Here my toggle for \"content.HTML\" page is working perfectly.
I need to hid

Answer 1

Try using IDs Here's a short example..

<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>

<script type="text/javascript">
   $('#thumbnail').click(function() {
     $('#showhide').toggle();
   });
</script>

Answer 2

Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.

Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :

Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :

........

    <frameset rows="10%,90%" border="0" name="FrameName">   
    <frame  name="topFrame" src="menu_1.html" target="right"></frame>
    <frame name="menu" src="content.html" target="_self"></frame>

    <noframes>
    //....
    </noframes>

    </frameset>
    <script>
        var origCols = null;
        function receiveMessage(event)
        {
          if(origCols!=null)
           showFrame()
          else
           hideFrame();
        }

        addEventListener("message", receiveMessage, false);

        function hideFrame() {
            var frameset = document.getElementById("frameSet");
            origCols = frameset.rows;
            frameset.rows = "0, *";
        }

        function showFrame() {
            document.getElementById("frameSet").rows = origCols;
            origCols = null;
        }
        </script>
    </html>

And now write onclick of button like below :

<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>