CODEWITHSUNDEEP
jquerytogglefadein
user4630
user4630

Reputation: 633

jQuery: Toggle & Fade In?

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.

Upvotes: 0

Views: 2035

Answers (2)

adeneo
adeneo

Reputation: 318202

$(function() {
    $('.toggle-box').hide().contents().hide();
    $('.toggle1').on('click', function(e) {
        e.preventDefault();
        $('.toggle-box').slideToggle('fast', function(e) {
            if ($(this).is(':visible')) {
                $(this).contents().fadeIn(2000);
            }else{
                $(this).contents().hide();
            }
        });
    }); 
});

FIDDLE

Upvotes: 0

Jon Best
Jon Best

Reputation: 38

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 :P

Upvotes: 2

Related Questions