title: Show and hide a frame using JavaScript or jQuery
body: <p>I need to hide the frame "topFrame" and "menu" when I click on any image or button and unhide it when I click on it again. Is there a way I can achieve it easily?</p>
  
  <p>Sorry for not posting "topFrame" and "menu" jsp files, as those are dynamically rendering in my application.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;script src="/jquery-1.10.2.min.js" language="javascript"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;&lt;/style&gt;
      &lt;/head&gt;
  
  
          &lt;frameset rows="80,*" frameborder="no" border="0" framespacing="0"&gt;
              &lt;frame src="/someAction1.do" name="topFrame" scrolling="no" noresize=""&gt;
  
              &lt;frameset cols="20%,80%*" frameborder="0" framespacing="0" border="0"&gt;
                  &lt;frame src="/someAction2.do" name="menu" marginheight="0" marginwidth="0" noresize="true" scrolling="auto" framespacing="0" border="0" frameborder="0"&gt;
                  &lt;frame src="/someAction2.do" name="information" marginheight="0" marginwidth="0" scrolling="auto" framespacing="0" border="0" frameborder="0"&gt;
              &lt;/frameset&gt;
  
          &lt;/frameset&gt;
  
          &lt;noframes&gt;
              // ...
          &lt;/noframes&gt;
  
  &lt;/html&gt;
  </code></pre>