javascript - Hide DIVs by ID on page load -

i have following js in page layout (running ror):

<script>   $(document).ready(function() {     document.getelementbyid('1').style.display = 'none';     document.getelementbyid('2').style.display = 'none';     document.getelementbyid('3').style.display = 'none';     document.getelementbyid('4').style.display = 'none';     document.getelementbyid('5').style.display = 'none';     }); </script> 

i trying have 5 divs hidden on page load can not seem work. can use js or jquery. have tried well:

$(window).load(function() {   ...js code... }); 

and still not hide divs on page load.

what need write in js have div id 1..5 hidden?

first, isn't recommended ids start numbers. compatibility issues, don't ask me.

second, code particularly redundant , nullifies purpose of having ids. use common class or less redundant yet nest them in container , grab children.

<div id="container">   <div></div>   <div></div>   <div></div>   <div></div> </div> 

$(document).ready(function(){   $("#container div").hide(); }); 

calling .show , .hide toggles display: none css attribute.