IE7 ignores :not-selector.

Question

Internet Explorer 7 seems to ignore the :not-selector in the second line in following example, it shows and then hides the content - instead of showing the content with the right index and hiding the rest.

$('.dashboard-module-content:eq(' + indexFoo + ') .expand-collapse').show('fast');
$('.dashboard-module-content:not(:eq(' + indexFoo + ')) .expand-collapse').hide('fast');

Anyone knows who to tackle a problem like this?

Answer 1

The jQuery pseudo selector :eq() is in relation to the result set, not to the position inside a parent, etc. Try this:

$(".dashboard-module-content .expand-collapse")
   .eq(indexFoo).show('fast').end()
   .not(':eq(' + indexFoo + ')').hide('fast');

I assumed there is a 1:1 ratio of .dashboard-module-content to .expand-collapse. (Each dashboard module contains only one expand collapse block)

This block is also a little more optimized as it is not collecting all the .dashboard-module-content blocks twice per execution.