This Iframe contains content from another domain. Click "Show / hide content" and the Iframe should tell the parent frame to resize using window.postMessage if available, otherwise using the document hash (IE6 / 7).

The child frame code

$(function(){
  // Get the parent page URL as it was passed in, for browsers that don't support
  // window.postMessage (this URL could be hard-coded).
  var parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) ),
    link;
  
  // The first param is serialized using $.param (if not a string) and passed to the
  // parent window. If window.postMessage exists, the param is passed using that,
  // otherwise it is passed in the location hash (that's why parent_url is required).
  // The second param is the targetOrigin.
  function setHeight() {
    $.postMessage({ if_height: $('body').outerHeight( true ) }, parent_url, parent );
  };
  
  // Bind all this good stuff to a link, for maximum clickage.
  link = $( '<a href="#">Show / hide content<\/a>' )
    .appendTo( '#nav' )
    .click(function(){
      $('#toggle').toggle();
      setHeight();
      return false;
    });
  
  // Now that the DOM has been set up (and the height should be set) invoke setHeight.
  setHeight();
  
  // And for good measure, let's listen for a toggle_content message from the parent.
  $.receiveMessage(function(e){
    if ( e.data === 'toggle_content' ) {
      link.triggerHandler( 'click' );
    }
  }, 'http://benalman.com' );
});