How to show and hide div elements based on dropdown selection in HTML using Jquery. In this tutorial we will learn how to Show Hide div element on dropdown value change using Jquery removeClass() and addClass().
Step 1: HTML
First, we need to design a form using HTML. In this form we have to add one select dropdown and two textbox. Because, When the value (“Yes”) is selected in Dropdown then, based on its selected value the HTML DIV with two Textbox will be shown or hidden. But, Before performing this event, first we need to hide the HTML DIV using CSS (display:none;)
<form id="contForm" action="" method="">
<h3>Show/Hide div on dropdown value change</h3>
<h4>Do you have a passport? Kindly fill the details.</h4>
<select name="passport" id="passport" class="passport">
<option value="" selected>-Select-</option>
<div class="hidden" id="pDetails">
<input type="text" name="passportNumber" required placeholder="Passport Number">
<input type="date" name="expiryDate" id="expiryDate" required >
<button name="submit" type="submit" id="contact-submit">Submit</button>
Step 2: JQuery
Using the below the Jquery to add and remove the CSS class name based on the dropdown value selection.