title: Javascript show/hide div with iframe inside works in everything but IE
body: <p>This is the <code>javascript</code> code I'm currently using:</p>
  
  <pre><code>     function toggleContainer(containerID, hideContainerIDs) {
              if(hideContainerIDs) {
                  for(var i=0; i&lt;hideContainerIDs.length; i++) {
                      ajaxChat.showHide(hideContainerIDs[i], 'none'); 
                  }
              }       
              ajaxChat.showHide(containerID);
              if(typeof arguments.callee.styleProperty == 'undefined') {
                  if(typeof isIElt7 != 'undefined') {
                      arguments.callee.styleProperty = 'marginRight';
                  } else {
                      arguments.callee.styleProperty = 'right';
                  }
              }
              var containerWidth = document.getElementById(containerID).offsetWidth;
              if(containerWidth) {
                  document.getElementById('chatList').style[arguments.callee.styleProperty] = (containerWidth+28)+'px';
                  document.getElementById('chatBooth').style[arguments.callee.styleProperty] = (containerWidth+28)+'px';  
              } else {
                  document.getElementById('chatList').style[arguments.callee.styleProperty] = '20px';
                  document.getElementById('chatBooth').style[arguments.callee.styleProperty] = '20px';
              }
  
          }
  </code></pre>
  
  <p>The DIV and IFrame Code:</p>
  
  <pre><code>&lt;div id="chatBooth" style="display:none; overflow: hidden;"&gt; 
          &lt;iframe style="overflow:hidden;height:100%;width:100%" height="100%" width="100%" frameborder="0" scrolling="no" name="booth" id="booth" src="about:blank"&gt;
          &lt;/iframe&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I've tried everything I can think of, This code seriously works in every browser but <code>IE</code>. What it's doing is when you click on a link inside the window that is currently visible it loads a new page inside the hidden <code>IFrame</code>, and you can make said <code>IFrame</code> visible  with a button click. Here is the button to show and hide the hidden <code>DIV</code> and <code>IFrame</code>.</p>
  
  <pre><code>&lt;input type="button" value="[LANG]toggleChat[/LANG]" title="[LANG]toggleTitleChat[/LANG]" alt="[LANG]toggleChat[/LANG]" onclick="ajaxChat.showHide('chatBooth', null);"/&gt;   
  </code></pre>
  
  <p>Here is the code for the <code>Link</code> that changes what should be located in the <code>IFrame</code> that works in every browser but <code>IE</code>!</p>
  
  <pre><code>alert(this.channelName);
              document.getElementById('booth').contentWindow.location.reload(true);
              document.getElementById('booth').src = 'http://www.cnn.com';
  </code></pre>
  
  <p>The Above code works in everything but <code>IE</code>. I'm at a total loss. I've spent hours scouring <code>Google</code> and can't seem to find a solution or even what is causing the problem. Any help would be greatly appreciated.</p>
  
  <p>Here is the showHide code requested:</p>
  
  <pre><code>showHide: function(id, styleDisplay, displayInline) {
      var node = document.getElementById(id);
      if(node) {
          if(styleDisplay) {
              node.style.display = styleDisplay;
          } else {
              if(node.style.display == 'none') {
                  node.style.display = (displayInline ? 'inline' : 'block'); 
              } else {
                  node.style.display = 'none';
              }
          }   
      }
  }
  </code></pre>
  
  <p>The Codes used to Reload the Iframe and Change the Iframes SRC</p>
  
  <pre><code>document.getElementById('booth').contentWindow.location.reload(true);
  document.getElementById('booth').src = 'http://www.WEBSITE.com'+ ajaxChatConfig.loginChannelName +'/index.html';
  </code></pre>
  
  <p>The Above doesn't seem to allow IE to load anything inside the IFrames even when its told to do so.</p>