Show Hide Div Based on Dropdown Selection with jQuery | Code Snippet #28

Code Snippet #28:┬áThe code shows us how to show hide div based on a dropdown selection with jQuery using switch statement. A better way to show and hide divs in your JSP page using jQuery’s hide() and show() APIs.

Show Hide Div Based on Dropdown Selection with jQuery

In today’s code snippet, we are going to show three different things:

  • Show Hide div blocks
  • Show hide div based on dropdown selection
  • Implemented using a switch statement using jQuery APIs hide() and show()

Drop down selections are a common way to take predefined data from the user using a form submission. There are different ways to show a content based on the selection of a drop down field. jQuery has functions like show(), hide(), toggle() and so on to hide or show div blocks. In this tutorial, the first block of div is shown to the user as the first drop down field is already shown. When the user chooses the next drop down field, the div block changes.

DEMO: Here is the demo below to show hide div based on dropdown selection:




We do not use any CSS in this code snippet. The HTML markup is simple. We have added a select drop down and two div blocks below that for simplicity.

In the jQuery, we check for the drop down change we then call the function “handleNewSelection”. In “handlenewSelection” function, we call another function to hide all the divs using hide(). Now we have the simple switch statement to show the div based on the dropdown selection. Here we use show() API to show. This is a very simple code snippet to show and hide divs using swtich statements.

Hope you liked the code snippet, please let us know if any issues.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...