How to fade all divs in a container except one with jQuery?

Question

I've got this:

$("#id").click(function() {
    $('.swoosh div').fadeOut('fast', function(){
        $('.template').fadeIn('fast');
    });
});

.swoosh is the container div, and .template is the div that i want to remain when i click on #id, while all other divs inside .swoosh disappear.

I feel a bit silly, but I've played around for ages to no avail. Please help a brother out.

Answer 1

You can probably use the not^[doc] selector

$("#id").click(function() {
    $('.swoosh div:not(.template)').fadeOut('fast');
});

Answer 2

    $('.swoosh div[class!="template"]').fadeOut('fast');

Answer 3

$("#id").click(function() {
    $('.swoosh div').fadeOut('fast');
    $('.template').fadeIn('fast');
});

Answer 4

Since you are fading out the container DIV it seems logical that all elements within that DIV are also fading out. So, what you can do, is extract the element from the container div and placing it somewhere else in the DOM, before fading the container DIV out. That way, It should remain visible.

Answer 5

old question but this would work too

$("#id").click(function() {
    $('.swoosh div').not($('.template')).fadeOut('fast');
});