jQuery toggle, close link is not swapping toggle status
<p>hello so i have the following:</p>

<pre><code>jQuery('#settings').toggle(function() {
  jQuery('#event_time_interval_form_part').fadeIn();
}, function() {
  jQuery('#event_time_interval_form_part').fadeOut();
});
jQuery('.cancel').click(function(e){
    e.preventDefault();
    jQuery(this).parents('#event_time_interval_form_part').fadeOut();
});
</code></pre>

<p>and the HTML</p>

<pre><code>&lt;div class="auction-settings"&gt;
    &lt;span id="settings"&gt;&lt;span class="icon icon-cogs"&gt;&lt;/span&gt; settings&lt;/span&gt;
    &lt;div id="event_time_interval_form_part" style="display:none;" &gt;
        &lt;span class="cancel"&gt;cancel&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>However i cannot work out how to switch the toggle around when you click the close link, the toggle works time when you click on settings (opens and closes) but w hen it is open and you click cancel inside the toggle area, it closes which is good but if you click settings again you have to click it twice before it shows.</p>

<p>Any ideas?</p>
