In this blogpost, I will focus on achieving the following effect using jQuery.
- Inverse of slideUp/slideDown using jQuery
Lets imagine the following situation – You have a slide-down menu. For this you are using 2 divs(#one and #two). div#two should slide down to show it’s content, when you click once on div#one and on the second click div#two should slide up to hide the content of div#two.

You can achieve the above effect using just slideUp() and slideDown() methods in jQuery or by just using on slideToggle() statement

Lets add a little more to complicate this:

In terms of user experience, the slide-up and slide-down effect works just fine when the menu is within the viewing area of the browser (i.e., within the browser window boundaries). But if the menu is near the bottom boundary, the user has to scroll down to view the scroll-down menu. Addition of any additional user actions leads to confusion and poor usability for your website, especially when your web application is used widely.

To prevent this we have to detect the position of the menu and scroll it up when the menu is near the bottom of the browser window.

The code below shows you how to do just that. The method newUIPos() is used to determine the positioning of the scroll-down menu content, while the jQuery animate() is used to achieve the inverse of slideUp and slideDown in jQuery
[gist id=298183]

This is just one of way of doing this, so I would be open to any comments/suggestions.
Have a great day!