Jquery show/hide not working until refresh

I have a checkout page that has three fieldsets: fieldset id="1", fields开发者_高级运维et id="2", fieldset id="3". When the page loads, I need it to hide fieldsets 2 and 3 and only show fieldset 1. This is what my jquery looks like:

$(document).ready(function(){
  $("#1").show();                          
  $("#2").hide();
  $("#3").hide();
  $("#4").hide();
});

When I load the page I can see fieldset 1 and fieldset 2. If I refresh the page, it looks perfect, but upon first load, it's weird. Any suggestions?

First thing you need to do is properly name your ID's. ID's can't start with a number.

If you change the name to set_1 you can do the initial hide with CSS.

#set_2, #set_3, #set_4 { display:none; }

No JS needed.

Notwithstanding other issues, your IDs are invalid, which will always cause unpredictable results. Ids MUST begin with a letter.

Beyond that, it is difficult to answer your question without further insight into the code.

$(document).ready(function(){ 
  $("#el_1").show();
  $("#el_2, #el_3, #el_4").hide(); 
});

Should all be valid jQuery, assuming that there is no ID collision (you can only use an ID once per page).