Show or Hide a Div Based on Select Option in JavaScript

Using the `display` Property

The display property determines whether an element is rendered on the page. When set to none, the element is removed from the document flow and doesn't occupy space.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Show Div Using Display</title>
  <style>
    #box {
      display: none;
      background-color: salmon;
      color: white;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <label for="select">Choose an Option:</label>
  <select name="select" id="select">
    <option value="hide">Hide</option>
    <option value="show">Show</option>
  </select>

  <div id="box">Box Content</div>

  <script>
    const dropdown = document.getElementById('select');
    const box = document.getElementById('box');

    dropdown.addEventListener('change', function (event) {
      if (event.target.value === 'show') {
        box.style.display = 'block';
      } else {
        box.style.display = 'none';
      }
    });
  </script>
</body>
</html>

Explanation:

Initially, the div element with id="box" has its display property set to none.
The change event listener checks the selected value of the dropdown menu.
If the value is show, the div's display property is set to block, making it visible.
If the value is hide, the div is hidden again.

Using the `visibility` Property

The visibility property determines whether an element is visible or hidden, but it remains in the document flow and still occupies space.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Show Div Using Visibility</title>
  <style>
    #box {
      visibility: hidden;
      background-color: salmon;
      color: white;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <label for="select">Choose an Option:</label>
  <select name="select" id="select">
    <option value="hide">Hide</option>
    <option value="show">Show</option>
  </select>

  <div id="box">Box Content</div>

  <script>
    const dropdown = document.getElementById('select');
    const box = document.getElementById('box');

    dropdown.addEventListener('change', function (event) {
      if (event.target.value === 'show') {
        box.style.visibility = 'visible';
      } else {
        box.style.visibility = 'hidden';
      }
    });
  </script>
</body>
</html>

Explanation:

Initially, the div element with id="box" has its visibility property set to hidden.
The change event listener checks the selected value of the dropdown menu.
If the value is show, the div's visibility property is set to visible.
If the value is hide, the div becomes invisible but still occupies space in the layout.

Key Differences Between `display` and `visibility`

Property	Effect When Hidden	Affects Layout
`display`	Element is removed	Yes
`visibility`	Element is invisible	No

Conclusion

Choosing between display and visibility depends on your specific use case:

Use display when you want the element to be completely removed from the document flow.
Use visibility when you want the element to remain in the layout but not be visible.

Both methods are easy to implement and provide a clean way to show or hide elements dynamically using JavaScript. Experiment with both approaches to see which best fits your needs.