Question

I have the following toggle which works fine, god knows how i got it to work; dont understand all this.

jQuery(function() {
    jQuery('.toggle1').click(function() {
        jQuery('.toggle-box').slideToggle('fast');
        return false;
    });
});​

Is it possible for whatever is in .toggle-box to fade in after its toggled the box open?

I tried adding..

jQuery(".toggle-box").fadeIn(2000);

But had no luck.

Is it possible at all?

Many thanks for any help.

Answer 1

There’s a few best practice things that can help you here, but generically, just have whatever container (i’ll call it .toggle-boxInner) fadeIn() like so

also, there’s some cleaning up that can happen with you’re code, just some short cuts

$(function(){ // when ready...

    // here's your onClick listener for the toggle1 class element(s)
    $('.toggle1').click(function(){ 

        // slideToggle the toggle-box
        $('.toggle-box').slideToggle('fast', function(){ 

            // this is called when the toggle-box slideToggle is complete
            $('.toggle-box .toggle-boxInner').fadeToggle('fast'); 
        });
        return false; // i don't think you should need this unless you're using
                      //    a <a/> or <input type='submit' /> 
                      //    as the .toggle1 element
    });
});

you may want to .fadeToggle the Inner container so that it will disappear when the toggle-box slides back. also, feel free to change .fadeIn(‘slow’) to ‘fast’.

hope this helps!

edit: made those suggested changes 😛