title: Dynamic iframe height depending on hide/show
body: <p>I've got a form which contains some hidden fields that are only shown depending on the answer to a Yes/No radio button question.</p>
  
  <p>This form is used on multiple external website using an iframe, therefore are on a different domain. </p>
  
  <p>How can I change the height of the iframe depending on if these hidden field are shown or not. The way they are shown/hidden is using jquery show/hide in a separate scripts.js file. E.g</p>
  
  <pre><code> $('#show').click(function(){
       $('#additional_fields').show('fast'); 
  });
  
  $('#hide').click(function(){
     $('#additional_fields').hide('fast'); 
  });
  
  
  &lt;div id="additional_fields" style="display:none;"&gt; hidden fields here
  &lt;/div&gt;
  </code></pre>
  
  <p>iframe that contains the above:</p>
  
  <pre><code>&lt;iframe id="idIframe" src="http://websites.com/form.php" scrolling="no" height="1000" width="950" border="0"/&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Ive managed to get it to work using the following</p>
  
  <pre><code>$("#idIframe", top.document).css({ height: 1750 });
  </code></pre>
  
  <p>however, this only works when using the same domain.</p>