CODEWITHSUNDEEP
phpjavascriptjquerycss
David
David

Reputation: 1

Jquery show/hide not working until refresh

I have a checkout page that has three fieldsets: fieldset id="1", fieldset 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?

Upvotes: 0

Views: 711

Answers (2)

John Green
John Green

Reputation: 13435

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).

Upvotes: 2

Seth
Seth

Reputation: 6260

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.

Upvotes: 5

Related Questions