title: How to prevent a click() event through a child div to a parent div in jQuery?
body: <p>Situation:</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;div style="float: left;" class="headerTitle"&gt;+ OPEN&lt;/div&gt;
      &lt;div class="closeBtn" style="float: right;"&gt;- CLOSE&lt;/div&gt;
   &lt;/div&gt; 
  &lt;div class="touristenContent"&gt;.....&lt;/div&gt;
  </code></pre>
  
  <p>Visually:</p>
  
  <pre>|+Open..............................|-Close|..| (header)
  
  |............Content..........................|</pre>
  
  <p>Header DIV is a 'big button' with jQuery click() event for opening the content.
  The close DIV is inside the big header DIV and represents the <strong>close button</strong> also with click() event to close the content.
  This <strong>close button</strong> is only visible by clicking on the big header.</p>
  
  <p>Clickng on the header and oppening the content works as expecting but clicking on the <strong>close button</strong> let the click event through to the header DIV. The content closes and opens again beacause of two click events.</p>
  
  <p>So how can i design the whole thing properly to make the <strong>close button</strong> solid and to prevent click through it to the header?</p>