How to hide div on load?

by Eelco Teuthof   Last Updated August 13, 2019 19:26 PM

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.



Answers 3


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

computercarguy
computercarguy
August 13, 2019 18:28 PM

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

here is the url for solution.

working JSBin example

code_warrior
code_warrior
August 13, 2019 18:42 PM

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:

  1. Hide all divs with class hide applied to it.
  2. On change of options from drop down get index of selected option.
  3. If selected index is 0 which means option selected as "Show All" than remove class hide from all divs.
  4. 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>
Vinit S
Vinit S
August 13, 2019 19:15 PM

Related Questions


Updated June 18, 2017 00:26 AM

Updated November 03, 2017 08:26 AM

Updated July 20, 2017 17:26 PM

Updated January 02, 2018 04:26 AM