Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How can I show a hidden div when a select option is selected in JavaScript?

Javascript Web Development Front End Technology

Showing and hiding elements dynamically is a fundamental technique in JavaScript web development. One common scenario is revealing a hidden div when a specific select option is chosen, creating interactive forms and user interfaces.

Methods for Showing/Hiding Elements

There are two main CSS properties for controlling element visibility:

  • display: Removes element from document flow when hidden
  • visibility: Keeps element's space but makes it invisible

Method 1: Using visibility Property

The visibility property hides the element while preserving its layout space:

<!DOCTYPE html>
<html>
<head>
   <style>
      #tutorial {
         visibility: hidden;
         background-color: #76D7C4;
         color: black;
         width: 200px;
         height: 100px;
         padding: 20px;
         border: 2px solid #333;
      }
   </style>
</head>
<body>
   <label for="select">Select:</label>
   <select name="select" id="select">
      <option value="hide">Hide</option>
      <option value="show">Show</option>
   </select>
   
   <div id="tutorial">Welcome to TutorialsPoint!</div>
   
   <script>
      const selectElement = document.getElementById('select');
      const divElement = document.getElementById('tutorial');
      
      selectElement.addEventListener('change', function(event) {
         if (event.target.value === 'show') {
            divElement.style.visibility = 'visible';
         } else {
            divElement.style.visibility = 'hidden';
         }
      });
   </script>
</body>
</html>

Method 2: Using display Property

The display property completely removes the element from the layout when hidden:

<!DOCTYPE html>
<html>
<head>
   <style>
      #hidden_div {
         display: none;
         background-color: #E8F8F5;
         padding: 15px;
         border: 1px solid #17A2B8;
         margin-top: 10px;
      }
   </style>
</head>
<body>
   <label for="agreement">Do you agree to terms?</label>
   <select id="agreement" onchange="toggleDiv('hidden_div', this)">
      <option value="0">Disagree</option>
      <option value="1">Agree</option>
   </select>
   
   <div id="hidden_div">
      <h3>Thank you for agreeing!</h3>
      <p>You can now proceed with the registration.</p>
   </div>
   
   <script>
      function toggleDiv(divId, selectElement) {
         const targetDiv = document.getElementById(divId);
         targetDiv.style.display = selectElement.value == 1 ? 'block' : 'none';
      }
   </script>
</body>
</html>

Method 3: Conditional Form Fields

A practical example showing additional form fields based on user selection:

<!DOCTYPE html>
<html>
<head>
   <style>
      #passport-details {
         display: none;
         background-color: #F8F9FA;
         padding: 15px;
         margin-top: 10px;
         border: 1px solid #DEE2E6;
      }
      
      input[type="text"] {
         padding: 8px;
         border: 1px solid #CED4DA;
         border-radius: 4px;
      }
   </style>
</head>
<body>
   <label for="passport-question">Do you have a passport?</label>
   <select id="passport-question" onchange="showPassportFields()">
      <option value="No">No</option>
      <option value="Yes">Yes</option>
   </select>
   
   <div id="passport-details">
      <h4>Passport Information</h4>
      <label for="passport-number">Passport Number:</label>
      <input type="text" id="passport-number" placeholder="Enter passport number" />
      <br><br>
      <label for="expiry-date">Expiry Date:</label>
      <input type="date" id="expiry-date" />
   </div>
   
   <script>
      function showPassportFields() {
         const selectElement = document.getElementById("passport-question");
         const detailsDiv = document.getElementById("passport-details");
         
         detailsDiv.style.display = selectElement.value === "Yes" ? "block" : "none";
      }
   </script>
</body>
</html>

Comparison of Methods

Property Hidden Element Space Performance Use Case
visibility Preserves space Faster Animations, maintaining layout
display Removes space Slower (reflows) Dynamic content, forms

Key Points

  • Use addEventListener() for modern event handling
  • Choose display: none/block when you want to save space
  • Use visibility: hidden/visible to maintain layout structure
  • Always provide meaningful option values and labels

Conclusion

Showing hidden divs based on select options enhances user experience by creating dynamic, responsive forms. Choose between display and visibility properties based on whether you want to preserve layout space when elements are hidden.

Updated on: 2026-03-15T23:19:00+05:30

17K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements