
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().
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;)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="container"> <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> <fieldset> <select name="passport" id="passport" class="passport"> <option value="" selected>-Select-</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </fieldset> <div class="hidden" id="pDetails"> <fieldset> <input type="text" name="passportNumber" required placeholder="Passport Number"> </fieldset> <fieldset> <input type="date" name="expiryDate" id="expiryDate" required > </fieldset> </div> <fieldset> <button name="submit" type="submit" id="contact-submit">Submit</button> </fieldset> </form> </div> |
Using the below the Jquery to add and remove the CSS class name based on the dropdown value selection.
1 2 3 4 5 6 7 8 9 10 11 |
$('.passport').change(function(){ var responseID = $(this).val(); if(responseID =="Yes"){ $('#pDetails').removeClass("hidden"); $('#pDetails').addClass("show"); } else{ $('#pDetails').removeClass("show"); $('#pDetails').addClass("hidden"); } console.log(responseID); }); |
This CSS file will help you to design the Form as per your requirement.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 12px; line-height: 30px; color: #777; } .container { max-width: 400px; width: 100%; margin: 0 auto; position: relative; } #contForm input[type="text"], #contForm input[type="date"], #contForm select, #contForm button[type="submit"] { font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; } #contForm { background: #F9F9F9; padding: 25px; margin: 150px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } #contForm h3 { display: block; font-size: 26px; font-weight: 300; margin-bottom: 10px; text-align: center; } #contForm h4 { margin: 5px 0 15px; display: block; font-size: 13px; font-weight: 400; } fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contForm input[type="text"], #contForm input[type="date"], #contForm select { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; } #contForm input[type="text"]:hover, #contForm input[type="date"]:hover, #contForm select:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; } #contForm button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #df3812; color: #FFF; margin: 0 0 5px; padding: 10px; font-size: 15px; } #contForm button[type="submit"]:hover { background: #be2907; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #contForm button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } .copyright { text-align: center; } #contForm input:focus { outline: 0; border: 1px solid #aaa; } ::-webkit-input-placeholder { color: #888; } :-moz-placeholder { color: #888; } ::-moz-placeholder { color: #888; } :-ms-input-placeholder { color: #888; } .hidden{ display: none; } .show{ display: block; }<gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw><gwmw style="display:none;"> |
Download Full source code of Show Hide div on dropdown value change. Just copy the below code in any editor and use it as per your requirement.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Show/Hide div on dropdown value change</title> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 12px; line-height: 30px; color: #777; } .container { max-width: 400px; width: 100%; margin: 0 auto; position: relative; } #contForm input[type="text"], #contForm input[type="date"], #contForm select, #contForm button[type="submit"] { font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; } #contForm { background: #F9F9F9; padding: 25px; margin: 150px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } #contForm h3 { display: block; font-size: 26px; font-weight: 300; margin-bottom: 10px; text-align: center; } #contForm h4 { margin: 5px 0 15px; display: block; font-size: 13px; font-weight: 400; } fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contForm input[type="text"], #contForm input[type="date"], #contForm select { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; } #contForm input[type="text"]:hover, #contForm input[type="date"]:hover, #contForm select:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; } #contForm button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #df3812; color: #FFF; margin: 0 0 5px; padding: 10px; font-size: 15px; } #contForm button[type="submit"]:hover { background: #be2907; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #contForm button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } .copyright { text-align: center; } #contForm input:focus { outline: 0; border: 1px solid #aaa; } ::-webkit-input-placeholder { color: #888; } :-moz-placeholder { color: #888; } ::-moz-placeholder { color: #888; } :-ms-input-placeholder { color: #888; } .hidden{ display: none; } .show{ display: block; } </style> <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" target="_blank" rel="noreferrer noopener">https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js</a>"></script> </head> <body> <div class="container"> <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> <fieldset> <select name="passport" id="passport" class="passport"> <option value="" selected>-Select-</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </fieldset> <div class="hidden" id="pDetails"> <fieldset> <input type="text" name="passportNumber" required placeholder="Passport Number"> </fieldset> <fieldset> <input type="date" name="expiryDate" id="expiryDate" required > </fieldset> </div> <fieldset> <button name="submit" type="submit" id="contact-submit">Submit</button> </fieldset> </form> </div> <script> $('.passport').change(function(){ var responseID = $(this).val(); if(responseID =="Yes"){ $('#pDetails').removeClass("hidden"); $('#pDetails').addClass("show"); } else{ $('#pDetails').removeClass("show"); $('#pDetails').addClass("hidden"); } console.log(responseID); }); </script> </body> </html> |
How to enable disable textbox when radio button selected
Require fields based on Dropdown selection