title: Completely Hide frame in framesets using Javascript or Jquery
body: <p>Please go thorough below HTML files code. <br>Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly. <br>I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.</p>
  
  <p>Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Frameset Example Title (Replace this section with your own title)&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;frameset rows="10%,90%" border="0" name="FrameName"&gt;   
      &lt;frame  name="topFrame" src="menu_1.html" target="right"&gt;&lt;/frame&gt;
      &lt;frame name="menu" src="content.html" target="_self"&gt;&lt;/frame&gt;
  
      &lt;noframes&gt;
      //....
      &lt;/noframes&gt;
  
      &lt;/frameset&gt;
      &lt;script&gt;
      $(document).ready(function(){
        $("button").click(function(){
           $('frame[name="topFrame"]').fadeToggle("slow");
          $("#top").toggle();
        });
      });
      &lt;/script&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>content.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;HTML Frames Example - Content&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
      font-family:verdana,arial,sans-serif;
      font-size:10pt;
      margin:30px;
      background-color:#ffcc00;
      }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Content&lt;/h1&gt;
  &lt;br&gt;
  
  &lt;button id="button1"&gt;Toggle 'em&lt;/button&gt;
  &lt;p&gt;Hiya&lt;/p&gt;
  &lt;p&gt;Such interesting text, eh?&lt;/p&gt;
  
  &lt;script&gt;
  $('button').on('click',function(){
       $( "p" ).toggle( "slow" );
        $( "h1" ).toggle( "slow" );
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>menu_1.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;HTML Frames Example - Menu 1&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body {
      font-family:verdana,arial,sans-serif;
      font-size:10pt;
      margin:10px;
      background-color:#ff9900;
      }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  (function(){
      $('img, button').on("click" , function (e) {
          $('p').toggle();
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h3&gt;Menu 1&lt;/h3&gt;
  &lt;p&gt;&lt;a href="white.html" target="content"&gt;White Page&lt;/a&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>