Exclude child checkbox from parent toggle
<p>I have a series of content and header divs to display some data. In addition each header has a checkbox.</p>

<pre><code>&lt;div id="content-1"&gt;
    &lt;div class="head"&gt;&lt;input type="checkbox" name="check-1"/&gt; Header&lt;/div&gt;
    &lt;div class="content"&gt;Content&lt;/div&gt;
&lt;/div&gt;
&lt;div id="content-2"&gt;...&lt;/div&gt;
&lt;div id="content-3"&gt;...&lt;/div&gt;
</code></pre>

<p>I use to following jQuery to show/hide a content div by clicking on the respective header div.</p>

<pre><code>$(".head").toggle(
    function(){ $(this).nextAll().slideDown('200'); },
    function(){ $(this).nextAll().slideUp('200'); }
);
</code></pre>

<p>The problem is that clicking the checkbox shows/hides the content div and the checkbox can not be checked/unchecked. I want the content toggle to only occur when clicking the head div, and for the checkbox to function as normal.</p>

<p>Any help greatly appreciated.</p>
