I have a bunch of divs sat within a parent div with the structure like this:

```
<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
    <div id="div7"></div>
    <div id="div8"></div>
    <div id="div9"></div>
    <div id="div10"></div>
</div>

```

Is there any way I can control the number of child divs displayed on page load using JS or jQuery. I want to ideally just display the first 5 and set the rest of the child divs to 

```
.css('display', 'none')

```

How can this be done?