Change Div Content With Drop Down Selection Using jQuery | Code Snippet #11

24 May , 2013  Code Snippets 

Change-Content-With-Drop-Down-SelectionCode Snippet #11: The code snippet is for change div content with drop down selection using jQuery.

Drop down selection box is a common feature in many web applications, websites and for forms on a page. With the help of jQuery these drop down selections can be used to show and hide div contents, these contents may be image, a paragraph, video or any other type of contents.

With the help of jQuery, the textbox drop down selection becomes extremely smooth along with some effects. These effects can be changed according to one’s needs and requirements. There are various types of jQuery functions available to add fade, slide up and down and other effects. In our example, I’ve added fadeIn function to fade the element on drop down selection. Here is a quick demo of how it would look like:

 HTML:

CSS:

JavaScript/jQuery Code Snippet:

Explanation:

HTML and CSS are self explanatory, jQuery is also easy to understand. In the jQuery script, initially all the blocks are hidden using the below code:

Next, only the first option with id option1 is displayed using the below code:

Once, there is a change in the selection, the blocks are hidden, and then the corresponding options with the number value 1, 2 or 3 are shown, the code is:

Here, we have used the fadeIn() function to get a fade effects upon change. But you can add other functions like:

  • .show()
  • .slideUp()
  • .slideDown() and so on.

Hope, you enjoyed this quick code snippet with the demo. Stay tuned for more such interesting code snippets in the upcoming posts.



, ,

Comments are closed.