Show Hide div on dropdown value change

Show Hide div on dropdown value change

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().

Show Hide div on dropdown value change

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;)

Step 2: JQuery

Using the below the Jquery to add and remove the CSS class name based on the dropdown value selection.

Step 3: CSS (style)

This CSS file will help you to design the Form as per your requirement.

How to show and hide div elements based on dropdown selection in HTML using Jquery

Full Source Code

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.

See Also

How to enable disable textbox when radio button selected

Require fields based on Dropdown selection