Fadeout all nested divs

On my page I’m trying to do smth like that: Lets say, when we click on some link with id min_reg it animates div with idftr_form_cntr, and shows another div tcr_form_cntr within.

There are 3-4 links that does same function but shows another div within ftr_form_cntr. Well if user clicked one of this links for the first time then there is no problem. But if user already clicked (I mean if ftr_form_cntr already opened) I want to just fadeOut all existing divs nested to ftr_form_cntr and fade in one another div (or swap existing div with another one).

Take a look at this line tcr_form_cntr.fadeIn(1000). What do I need to do before this line to fadeOut all nested divs?

My function look like this:

$(min_reg).click(function () {
    if($(ftr_form_cntr).hasClass('opened')){  
        $(ftr_form_cntr)...<fadeOut all nested divs>
        tcr_form_cntr.fadeIn(1000);
        return;
    }
    ftr_form_cntr.show().stop(true, true).animate({
        height:"170"
    },1000).addClass('opened');
    tcr_form_cntr.fadeIn(1000);
});

Answer

Assuming that ftr_form_cntr is a string variable holding the jQuery selector for your container element, you can select all the div elements inside and fade them like this:

$(ftr_form_cntr + " div").fadeOut();

Have a look at the jQuery doco on selectors, specifically the “descendant selector”.

If ftr_form_cntr is not a string variable but is actually, say, a reference to a DOM element or something then another way to select certain nested elements is using the .find() method, which gets descendants of the elements in your existing jQuery object according to another selector you provide:

$(ftr_form_cntr).find("div").fadeOut();