DEV Community

Avnish
Avnish

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)