16

In my code I use jQuery's toggle('slow') animation to make a hidden div appear/disappear. It expands from the upper left to the bottom right.

How can I make it expand from the top towards the bottom, instead (no left-to-right growth)?

4 Answers 4

28

You could use .slideToggle('slow').

The working demo.

5
  • @bevanb Have you checked the demo?
    – xdazz
    Commented Aug 24, 2012 at 9:29
  • 1
    yes, it seems to work fine there. Note that it works the same as .toggle('slow'). Doesn't work in my app though; still working it out.
    – bevanb
    Commented Aug 24, 2012 at 9:35
  • 1
    @bevanb It will expand from the top towards the bottom, not like .toggle('slow'), check the manual.
    – xdazz
    Commented Aug 24, 2012 at 9:37
  • Works as described in the demo, but not in my application. Note that toggle(slow) goes top to bottom in the demo as well.
    – bevanb
    Commented Aug 24, 2012 at 20:18
  • slideToggle does not work the same as slideDown. I had problems with slideToggle in my dropdown menu, where when I mouseover the child of the grandchild (the third-tier menu), there was an obnoxious jiggling because it "toggled" on/off/on/off. Once I replaced it with slideDown(), the problem instantly went away.
    – TARKUS
    Commented Aug 7, 2013 at 15:30
15

Try .slideDown('slow'). Note that this will only work for sliding down (to reveal) and sliding up (to hide). For anything more complex, you're looking for .animate(...) or something from jQuery UI.

1
  • Thank you! For my dropdown menu, slideToggle and animate() DO NOT work as well as slideDown(). Your solution definitely eliminated some problems I was having with those functions, where when I moused over-off a sub-menu parent, the sub-menu would expand-contract in a very annoying way. Once I replaced slideToggle() with slideDown(), my dropdown menu worked perfectly.
    – TARKUS
    Commented Aug 7, 2013 at 15:33
0

You could use jQuery's .animate (http://api.jquery.com/animate/) instead. That way you can set the CSS properties before and after the expand and only alter the height.

0

Try to put an with onclick $('#DIV-ID').toggle('slow'); return false;

Just like this: <a onclick="$('#DIV-ID').toggle('slow'); return false;">DROP DOWN</a>

1
  • 1
    Hi! Welcome to StackOverflow! Your question do not fix the issue of OP; his problem is NOT to start the animation, his problem is that he got the wrong type of animation (kind of...).
    – Bestter
    Commented Jun 19, 2019 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.