jQuery toggle help

Question

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

Any suggestions? Thanks!

html

<h2 class="collapsible_head">This is a title.<span class="hint_text_heading">This is a hint.</span></h2>
<div>
  This is the toggled content.
</div>

jquery

$(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();
});

UPDATE/

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:

http://jsfiddle.net/UGHgx/

Answer 1

I think this is what you are wanting:

CSS:

span.hint_text_heading { display: none; }

jQuery:

$('h2.collapsible_head').click(function() {
    $(this).next().slideToggle('slow');
    //$(this).toggleClass('active');
    $('span.hint_text_heading', this).fadeToggle();
}).next().hide();

Answer 2

How about this:

$(function(){ /* shorthand for $(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();
        $('h2:not(.active) span.hint_text_heading').fadeOut();

    }).next().hide();

});

Edit:
I would also recommend removing $('span.hint_text_heading').hide(); and just putting display:none; as a style, this is extra javascript where it isn't needed.