Question

I am trying to write a menu whose subitems vanish when the page is loaded.

If you need full HTML, I will copy it, however it just consists of a bunch of DIVs, the items under the headers have a class of subitems.

I have managed to do what I need via:

   $(document).ready(

    $(".subitems").hide()

   );

However, in Chrome, despite it working fine, I get the following error in the console:

(Using picture as I can’t copy the formatting well)

When I remove the above code, the error goes. I guess I have done something wrong, but I can’t see it and so far it works in every browser I have tested.

Any suggestions on either:

1. Have I done something wrong?
2. Is there a better way to achieve what I want?

Answer 1

You’re missing the anonymous function(function() { }) wrapper, like this:

$(document).ready(function() {
 $(".subitems").hide();
});

It’s trying to do $(".subitems").hide().call() under the covers when it executes the ready handlers…but this isn’t a function. Instead, it’s executing immediately (not on document.ready) and throwing an error when document.ready tries to run the result of .hide().

Just to note, there’s a shorter form of the above as well:

$(function() {
 $(".subitems").hide();
});