jQuery - Toggle div class on click
<p>No, this is not a straight forward toggle question.  I am aware of the toggle() functions and how to simply hide/show a div.  Imagine a box with a label inside:</p>

<pre><code>&lt;div class="section hidden"&gt;
    &lt;div class="section-legend"&gt;My Section&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When you click anywhere on the entire div, it should remove class <code>hidden</code>.  The box then looks expanded.  Now that the box is not of class <code>hidden</code> it should not be clickable.</p>

<p>Instead, when you click the <code>div.section-legend</code> it should add class <code>hidden</code> to the main div again.  Obviously the click event for the legend needs to stopPropagation(). Now the legend should not be clickable anymore and once again you must click the entire div to open it.</p>

<p>I can't get anything to work properly, and I know this is stupid code:</p>

<pre><code>$(document).ready(function() {

    $('.section.hidden').click(function() {
        $(this).removeClass('hidden');
        $(this).find('.section-legend').click(function(e) {
            $(this).parent().addClass('hidden');
            e.stopPropagation();
        });
    });

    $('.section-legend').click(function(e) {
        $(this).parent().addClass('hidden');
        e.stopPropagation();
        $(this).parent().click(function() {
            $(this).removeClass('hidden');
        });
    });
</code></pre>

<p>});</p>
