title: Inner div affected by outer div's onclick
body: <p><strong>Problem:</strong> <br>
  Clicking of the inner div triggers the onClick-event of the outer div. In this case it toggles the visibility of the outer <code>&lt;div&gt;</code>, inner <code>&lt;div&gt;</code> and the <code>&lt;p&gt;</code> element.</p>
  
  <p><strong>What I've tried:</strong><br>
  Setting the <strong>z-index</strong> higher on the inner div than the outer div. No effect.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id='messageForm' onClick=toggleMessageForm() &gt;
    &lt;div class="innerBox"&gt;
  
      &lt;p&gt;Hi!&lt;/p&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>function toggleMessageForm(){
    $('#messageForm').toggle();
  }
  </code></pre>
  
  <p><em>Note: The reason I'm using toggle() instead of show() is because I am using the same function when initially showing the form from a button in the original webpage.</em></p>