How to create drop down div in JQuery

0
4655

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. how to create drop down div in jquery
    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. style.css
    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. jquery

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

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

  18. Now click on the above link as shown you will be navigated to the following page:
  19. div in jquery

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

  25. Now if you run the index.html file you will have the following output :
  26. Drop Drown

  27. 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