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.

score 0 · Answer 1 · answered Aug 13 '19 at 18:28

You can do this with a combination of CSS and JS.

You can set the visibility in CSS using either display:none or visibility:hidden. Then when you want to show it, use JS or JQuery to set the CSS to display:block or visibility: visible, or whatever property for display you need.

What is the difference between visibility:hidden and display:none?

How to change CSS using jQuery?

Set CSS property in Javascript?

CSS Display options:
https://www.w3schools.com/CSSref/pr_class_display.asp

score 0 · Accepted Answer · answered Aug 13 '19 at 18:42

0

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

here is the url for solution.

working JSBin example

answered Aug 13 '19 at 18:42

code_warrior

80
5

I think this will not work proper because when click on Show All, all of the div should be shown. – Vinit S Aug 13 '19 at 19:18

Vinit S · Answer 3 · 2019-08-13T19:25:46.833

First of all instead of using ids in css for different divs you can give class to each of them and can give common class for height 30px. It is always recommended to use classes for CSS rather than IDs

Solution to Question is as follows:

Hide all divs with class hide applied to it.
On change of options from drop down get index of selected option.
If selected index is 0 which means option selected as "Show All" than remove class hide from all divs.
If other option is selected remove class 'hide' till that div and add class 'show.

Working Demo Link https://jsbin.com/durelir/1/edit?html,output Code for it is as follows.

<!Doctype html>
  <head></head>
  <style>
    .hide {
      display: none;
    }
    .show {
      display: block;
    }
    .groupData {
      height: 30px;
    }
    .group1 {
      background-color:green;
    }
    .group2 {
    background-color:orange;
    }
    .group3 {
    background-color:blue;
    }
    .group4 {
    background-color:red;
    }
    .group5 {
    background-color:#c23abc;
    }
    .group6 {
    background-color:#c2da2c;
    }
    .group7 {
    background-color:#e26ab1;
    }
  </style>
  <body>
    <select id="combobox" name="select" onchange="handleSelectChange();">
      <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 class="group1  groupData hide"></div>
      <div class="group2 groupData hide"></div>
      <div class="group3 groupData hide"></div>
      <div class="group4 groupData hide"></div>
      <div class="group5 groupData hide"></div>
      <div class="group6 groupData hide"></div>
      <div class="group7 groupData hide"></div>
    </div>
  </body>

  <script>
    function handleSelectChange() {
      const currentElement = document.getElementById('combobox');
      const showData = document.getElementsByClassName('groupData');
      const loopedItems = currentElement.selectedIndex !== 0 ? currentElement.selectedIndex : showData.length;

      for (let i=0; i < showData.length; i++) {
        showData[i].className = `group${i+1} groupData hide`;
      }

      for (let j=0; j < loopedItems; j++) {
        showData[j].className = `group${j+1} groupData show`;
      }
    }
  </script>
</html>

How to hide div on load?

3 Answers3