How to create drop down div in JQuery

0
4834

In this session today we will learn how to create a drop down div in jquery with the help of toggle functionality.

  • To learn how to create drop down div in jquery follow the steps given below :

  1. First of all create a folder and name it for example as DropDown .
  2. Now in this DropDown folder create an html file called as index.html .
  3. Open this index.html file with any one of the text editor for example NotePad++ and write the following code in it :
  4. Here are the screen shots for the code :

  5. Drop Down

    JQuery

  6. Now in our DropDown folder create another file called as style.css and add the following code into it .
  7. Here are the screen shots for the code :

  8. dropdown jquery

  9. Now to implement drop down menu effect let’s add some jquery code.
  10. For this we will require jquery header file to run our jquery programme.
  11. So just visit jquery.com and you will have the following window :

  12. Now click on the Download jquery button as shown in the above image:
  13. After clicking the download button you will be navigated to the following page :

  14. Now you can download any version from the jquery, here we will be downloading the compressed jQuery 1.11.1 as shown below:

  15. Now click on the above link as shown you will be navigated to the following page:

  16. Create a new jquery.js file in our DropDown folder and copy paste the above code into it.
  17. Now let’s create a file which will create some dropdown effect on the div .
  18. So in the DropDown folder create a new file called as Dropdown.js and write the following code in it:
  19. Here is the screen shot for the code :

  20. Now if you run the index.html file you will have the following output :

  21. Thus, we have successfully learnt how to create drop down div in JQuery .

LEAVE A REPLY

Please enter your comment!
Please enter your name here