How to hide div on load?

Question

I have a dropdown list, and based on the input there should appear one or multiple divs. But when the page is loaded, it show all divs. It just work after I changed the value in the dropdown.

I have tried to hide the div, but then it keeps hidden. Also when I place value "1" as first, it just show everything on load.

<script>
$(document).on('change','#combobox',function(){
    var selected = $("#combobox option:selected");
    if ($("#group" + selected.val()).length > 0) {
        $("#group" + selected.val()).prevAll().show();
        $("#group" + selected.val()).nextAll().hide();
        $("#group" + selected.val()).show();
    }
    else {
        $('.container > div').hide();
    }
});
</script>

#group1 {
    background-color:green;
height: 30px;
}

#group2 {
    background-color:orange;
height: 30px;
}

#group3 {
    background-color:blue;
height: 30px;
}

#group4 {
    background-color:red;
height: 30px;
}

#group5 {
    background-color:#c23abc;
height: 30px;
}

#group6 {
    background-color:#c2da2c;
height: 30px;
}

#group7 {
    background-color:#e26ab1;
height: 30px;
}

<select id="combobox" name="select">
  <option value="all">Show all</option> 
  <option value="1">Show till div 1</option> 
  <option value="2">Show till div 2</option>
  <option value="3">Show till div 3</option>
  <option value="4">Show till div 4</option>
  <option value="5">Show till div 5</option>
  <option value="6">Show till div 6</option>
  <option value="7">Show till div 7</option>

</select>
<div class="container">
    <div id="group1"></div>
    <div id="group2"></div>
    <div id="group3"></div>
    <div id="group4"></div>
    <div id="group5"></div>
    <div id="group6"></div>
    <div id="group7"></div>
</div>

I need the "container" to be hidden at the load (or just show Group 1) and show up after there is a value selected in the dropdown.

Answer 1

You can hide the div's under container, like .containder > div { dispaly: none; }

here is the url for solution.

working JSBin example