How to use the jQuery :not selector.

Question

I'm trying to show one div and hide other divs with the same class, when a link is clicked

$(this).find('h2 a').click(function() {
 $('.expand-collapse:eq(' + numberFix + ')' ).show('fast');
 $('.expand-collapse:eq:not(' + numberFix + ')' ).hide('fast');
return false;
});

It does show the affected div, but the other divs don't hide - am I using :not in a wrong way? I used it this way with "nth-child" and that worked fine.

Any ideas on how to go about this would be appreciated! :)

Answer 1

Try :not(:eq(...)).

$(this).find('h2 a').click(function() {
    $('.expand-collapse:eq(' + numberFix + ')' ).show('fast');
    $('.expand-collapse:not(:eq(' + numberFix + '))' ).hide('fast');
    return false;
});

Answer 2

Try siblings:

$(this).find('h2 a').click(function(e) {
    $('.expand-collapse:eq(' + numberFix + ')' )
        .show('fast').siblings().hide('fast');
    e.preventDefault();
});