HOW TO CREATE A JQUERY SLIDEDOWN TOGGLE JQUERY EFFECT TUTORIAL

HOW TO CREATE A JQUERY SLIDEDOWN TOGGLE JQUERY EFFECT TUTORIAL

45
Share:

45 Comments

  1. This is perfect, just what I was looking for. Thank you so much for posting this.

    avatar
    Alex
    1. Your welcome!

      avatar
      Admin
  2. how to add text to thw dropdown

    avatar
    anahita
    1. Not sure what you mean?

      avatar
      Admin
  3. Nice script! How can I use more as one of them on one site?

    avatar
    Pixel
    1. Just do the same again :)

      avatar
      Admin
    2. I tried using more than one. The first link/label opens all of them and the rest of the links don't seem to do anything. Maybe it's got something to do with the id="dropdown"?

      avatar
      R
    3. You will need to create different names for each one.

      avatar
      Admin
  4. hi,admin.Do u know how to create Sliding Panel Menu using jQuery?been searching for lots of tutorial but none of them is useful.

    avatar
    karen
    1. Hi, can you please explain a little more, the reason is this is kind of a sliding panel. What are you after exactly? Thanks UBL

      avatar
      Admin
  5. I have a sidebar and I want it to slide to the left and stop about 40px so that there are room in order to re-click the sidebar back out, How do I do this?

    avatar
    Ben
    1. We will do a tutorial on something simular soon :)

      avatar
      Admin
  6. Is it also possible to open it under the button, instead of above like this tutorial?

    avatar
    Karlijn
    1. Yes, this is all to do with your css. Thanks UBL

      avatar
      Admin
  7. I tried it with changing the ID tags. The script was

    avatar
    R
  8. thanks a lot. after many tries and quite some time searching, this has been the first script on that subject, that has worked for my beginner's knowledge on javascript and hence also properly within my html.

    avatar
    jen
    1. Your welcome :)

      avatar
      Admin
  9. How can we add multiple divs on the page that drop down individually? Right now I have two different div containers each with a button (X and Y) but when I click either, it drops down both containers instead of the corresponding one.

    avatar
    Nicole
    1. We will try and do another tutorial which will cover this soon Thanks UBL

      avatar
      Admin
  10. Nice short tips and very useful.

    avatar
    Thach Pham
  11. thanks.. )

    avatar
    katonlof
  12. Perfect tip. It help me alot. Many thanks.

    avatar
    Halong Bay
    1. Your Welcome

      avatar
      Admin
  13. Hi! That's an awesome tutorial, good job :). Unfortunately I do have one question. I'm using your script to hide/show certain part of the text which is quite deep down on the page & each time someone closes it, they are sent to the top of the entire page. Could you provide some tip to fix this issue? Thanks!

    avatar
    Martin
    1. You can use the preventDefault function, please see http://api.jquery.com/event.preventDefault/ Hope this helps Thanks UBL

      avatar
      Admin
  14. This is so awesome, simple and effective. How would you go about though, to add a class to My new text here when the dropdown wrap is open? For example, I would like to use it as a toggle bar with an arrow pointing down. Then with an image sprite, when the dropdown wrap is open to have an up arrow show, to indicate it should be closed again. With the extra class on open I can move the background image sprite to move to the up arrow?

    avatar
    Elzette
    1. Hi sorry that would take a whole new tutorial, I will of course take a look into bring a tutorial for this though :)

      avatar
      Admin
    2. HI, You should try jquery accordion widget. This would be the easiest way of doing most things, and best of all it is supported in all browsers. I prefer to use css3, but as a new technology, it has it's limits., but still fun to work with! Try this link.http://jqueryui.com/accordion/

      avatar
      mark roberts
  15. Hi UBL, this is an awesome thing, I do have a question. When referencing the CSS ".dropdownwrap" in the jquery script, it opens ALL dropdownwrap class DIV's. Do we need to create different CSS sections for each individual DIV? e.g. .dropdownwrap1 .dropdownwrap2 .dropdownwrap3 or can you link the function to a DIV ID?

    avatar
    Jasper
    1. You would need to add different names like you have said and then call it like you have already.

      avatar
      Admin
    2. thanks a lot this it very useful and your theme is awesome !

      avatar
      bartender
  16. Cool stuff thanks. On a note for those looking to have several "drops" on a page, if your page follows a template, in the head <> of that template just duplicate the downdrop css and give them different names like this .dropdownwrap1{ height:auto; float:center; margin:0px 0px 0px 0px; background-color:#ffffff3; display:none; padding:0px; } .dropdownwrap2{ height:auto; float:center; margin:0px 0px 0px 0px; background-color:#ffffff3; display:none; padding:0px; } Then on your individual page that is based off of that template, wherever your drops go, give each instance a unique ID name like "dropdown1" and "dropdown2" and finally, in each instance, make a div class match to one of the classes you placed in the template. for example and It works well.

    avatar
    Michael
  17. Thanks for this tutorial. This works great on iOS, but on Android (both stock browser and Chrome), the animation is choppy and slow. Any suggestions?

    avatar
    KenM
    1. Unfortunately there is an issue with the Android which jQuery have stated they know about it...

      avatar
      Admin
  18. Just what I was looking for ! You're the king ! And it's really clear for a newbie. Many thanks !

    avatar
    billboquet
    1. thank you, That is what I was looking for

      avatar
      aicungdep
  19. Great, just what i was looking for! Added a line to the script to prevent default link action

    avatar
    HarmO
  20. You my man, are what I call ' AWESOMMMEEEEE'. It's a perfectly written code without any glitch, down to the T. A double thumbs up

    avatar
    OScar
  21. thanks, your content is useful to me

    avatar
    cambodian hair
  22. Hello all member! .Do u know how to create Sliding Panel Menu using jQuery? been searching for lots of tutorial but none of them is useful. Thank's a lot!

    avatar
    internet việt nam
  23. thanks alot you guys saved me a create deal

    avatar
    frank
  24. Thanks you!

    avatar
    cambodian hair
  25. Thank for sharing! ;)

    avatar
    Bao cao su GOLD BAO
  26. jQuery is easy and simple to learn.Your tutorial is very helpful for those who really want to learn something and improve their skills.I saw many tutorials but find your's best.Thank you for sharing such a knowledgeable post.Keep sharing.Hope to see more tutorials from you.

    avatar
    Jitesh Manaktala

Leave a Comment

By posting you accept to signing up to our newsletters.
You are free to opt out at anytime by clicking on the link within the newsletter.
We will not give your personal information to any 3rd party companies, it will only stay with us.
Without accepting this you will not be able to comment.

Do you accept?