title: Javascript: Div onclick doens't work for some div content
body: <p>I would like to expand/collapse a div when this div is clicked on. It already works with onmouseover/onmouseout, but I would prefer onclick.</p>
  
  <p>Now, the problem seems to be the content of the div:</p>
  
  <p>This works:</p>
  
  <pre><code>&lt;div onclick="alert('works')" style="position:fixed; height:100px; width:100px; background:#FF0000;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This doesn't work:</p>
  
  <pre><code>&lt;div onclick="alert('works')"&gt;
      &lt;div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;"&gt;
          &lt;script&gt;
              document.write('&lt;IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"&gt;&lt;/IFRAME&gt;');
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this (onmouseover instead of onclick) works again:</p>
  
  <pre><code>&lt;div onmouseover="alert('works')"&gt;
      &lt;div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;"&gt;
          &lt;script&gt;
              document.write('&lt;IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"&gt;&lt;/IFRAME&gt;');
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I guess it must be some layering issue, but I tried putting the "onclick" into each of the different div/iframe layers and I couldn't get it to work. I'm a beginner and it'd be great to get a tip on what's wrong! Thanks!</p>