jQuery toggle help
<p>Currently, clicking on the h2 tag toggles the div with slideToggle. However, I'm trying to also fade in and out the <code>.hint_text_heading</code> that exists within the h2 tag. So, originally, what I tried to do at least, I am adding an <code>.active</code> class to the h2 tag thats open, then fading in the <code>.hint_text_heading</code>. However, I can't get <code>.hint_text_heading</code> to fade out when I close the div.</p>

<p>Any suggestions? Thanks!</p>

<h1>html</h1>

<pre><code>&lt;h2 class="collapsible_head"&gt;This is a title.&lt;span class="hint_text_heading"&gt;This is a hint.&lt;/span&gt;&lt;/h2&gt;
&lt;div&gt;
  This is the toggled content.
&lt;/div&gt;
</code></pre>

<h1>jquery</h1>

<pre><code>$(document).ready(function(){
    $('span.hint_text_heading').hide();
    $('h2.collapsible_head').click(function() {
        $(this).next().slideToggle('slow');
        $(this).toggleClass('active');
        $('h2.active span.hint_text_heading').fadeIn();
    }).next().hide();
});
</code></pre>

<p>UPDATE/</p>

<p>Here's an example in jsFiddle. As you can see, the div toggles, and the hint text fades in, however, when the div is hidden, the hint text remains. I am trying to get that to fade out:</p>

<p><a href="http://jsfiddle.net/UGHgx/" rel="nofollow">http://jsfiddle.net/UGHgx/</a></p>
