CODEWITHSUNDEEP
javascriptjquery
stewart715
stewart715

Reputation: 5637

jQuery toggle help

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/

Upvotes: 2

Views: 329

Answers (6)

suhair
suhair

Reputation: 10939

I will go with animation callbacks. Example: http://jsfiddle.net/X99Z6/

Upvotes: 0

Ortiga
Ortiga

Reputation: 8824

Working code (tested):

$(document).ready(function() {
    $('h2.collapsible_head').click(function() {
        $('h2.active span.hint_text_heading').hide();
        $(this).next().slideToggle('slow');
        $(this).toggleClass('active');
        $('h2.active span.hint_text_heading').fadeIn();
    }).children().hide().end().next().hide();
});

Here's the fiddle: http://jsfiddle.net/UGHgx/3/

Upvotes: 0

Rik
Rik

Reputation: 483

Well, the quick and dirty solution:

http://jsfiddle.net/CpVSC/12/

$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {

    $(this).next().slideToggle('slow');
    if($(this).hasClass('active')){
          $('.hint_text_heading').fadeOut(); 
       }else{  
    $('span.hint_text_heading',this).fadeIn();
}
     $(this).toggleClass('active');
}).next().hide();

Upvotes: 0

mattsven
mattsven

Reputation: 23303

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

Upvotes: 5

thecodeparadox
thecodeparadox

Reputation: 87083

Do you want this;

$(document).ready(function(){
    $('span.hint_text_heading').hide();
    $('h2.collapsible_head').click(function() {
        $(this).children('.hint_text_heading').fadeOut().end().next().slideToggle('slow');
        $(this).toggleClass('active');
        $('h2.active span.hint_text_heading').fadeIn();
    }).next().hide();
});

If not, please comment me and I'll try to give you solution.

Upvotes: 1

Kokos
Kokos

Reputation: 9121

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.

Upvotes: 4

Related Questions