title: Hide iframe using jquery .hide
body: <p>I am creating an iframe from a bookmarklet. The iframe has <code>id='contentIframe'</code></p>
  
  <p>I want to be able to hide the iframe from within so i'm using the following html &amp; jquery code:</p>
  
  <pre><code>&lt;button id="hide"&gt;hide&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $("#hide").click(function() {
          $("#contentIframe").hide();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But when I click the button it simply does nothing.</p>
  
  <p>Also, when the iframe loads it loads from a css file so the surround of the inner html is a class named modal... if I inspect this class in say Chrome and manually set <code>display:none;</code> this hides the iframe and this is actually a preferable solution for a couple of resons so i try:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $("#hide").click(function() {
          $(".modal").hide();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This also has no effect when clicking the button... Any ideas?</p>
  
  <p>NOTE: I only have control of the iframe, not the outer page as the iframe is used to collect data from the page a user is viewing</p>