Question

I’m using JQuery 1.4.2 for an accordion effect on my website. All but one category start hidden. This works in Chome and recent Firefox, older versions of Safari and all Internet Explorer versions however start with EVERYTHING hidden. Is there an incompatibility with those browsers or is something wrong with my code?

$(document).ready(function() {
        $('div.chapter:not(:first)').hide();
        $('h2.caption').click(function() {
            $('div.chapter:visible').slideUp("slow");
            $(this).next().slideDown("slow");
        });
        return false;
    });

Obviously, the chapters’ contents are each inside a div.chapter.

Here is an example page with my code

Answer 1

Use :gt() to get all but the first, like this:

$('div.chapter:gt(0)').hide();

This works cross-browser and no selector issues, it hides anything greater than index 0, so all but the first. :first isn’t meant to be used inside a :not() so this is a bit of a weird case, not the first….of what? If you consider the cases you can see how :not(:first) is pretty ambiguous, it’s meant to be used by itself.