Take the 2-minute tour ×

jQuery's slideUp effect hides the element by sliding it up, while slideDown shows the element. I want to show my div using slideUp. can anyone guide me ? thanks

share|improve this question

4 Answers 4

      $(this).hide("slide", { direction: "down" }, 1000);


share|improve this answer
Upvoted for readability –  rossipedia Mar 9 '11 at 8:05
I want to show the div and not hide it guys –  Umair Mar 9 '11 at 8:07
Umair, I have not tried this, but you could try to change the "hide" to "show" and change the direction to which ever direction you want. –  Jason Mar 9 '11 at 8:13
no I didnt, I dont want jQuery UI. I want to do this with jQuery only! –  Umair Mar 9 '11 at 10:06
If you want it, do it. There was an answer before(has been deleted now) using animate, that should be the right way. But you have to do something more on your own than only tell us what you want to have. –  Dr.Molle Mar 9 '11 at 10:42

I found a tricky way...
you can set div with css style bottom:0px, add call
will show with the slideUp-to-show effect you want.

share|improve this answer
This works, but only as long as the #div in question can also be set to position: absolute; When the #div in question needs to be positioned relative, it does not. –  Strixy Apr 25 '13 at 21:26

Jquery toggle

This toggle effect is only for up and down. Jquery UI is for every other direction

share|improve this answer
how to use toggle for up and down ? –  Umair Mar 9 '11 at 11:29

To get the opposite of slideUp and slideDown. Add these two functions to jQuery.

$.fn.riseUp = function()   { $(this).show("slide", { direction: "down" }, 1000); }
$.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); }
share|improve this answer
For this you need to use the jQueryUI library, link –  Yokocapolo Dec 8 '12 at 19:47
This is effectively the same answer that @jason gave earlier only somewhat more obtuse due to namespacing. –  Strixy Apr 25 '13 at 21:41
It is essentially the same answer, though this in shortcut-form, that may be more readable to some. –  jpillora Apr 27 '13 at 6:25
This is a much better answer because it is easily re-usable. –  Alan Buchanan Aug 5 '13 at 8:18
may be you want try slideToggle() it's up and down show hide functionality. Slow down the movement by give it a value like this slideToggle(500) or slideToggle('slow'). –  Ari Susanto Jul 14 at 13:40

Your Answer


