Reverse direction of jquery .slideToggle() - slideDown/slideUp behavior?


I’ve been looking at jquery to replicate an effect I saw on the Drupal website (the advanced options of the search box). As I think trying this stuff out is the best way to learn I have built a demo.

My demo

However, I’m now trying to work out how to reverse this effect - so the hidden content is revealed by sliding up rather than down. Is there any way to reverse the default jquery slideDown/slideUp behavior?

I found this tutorial but the css means that there is an existing “space” for the hidden content to move into. I would like the content to appear over the top of existing content.

Any pointers?

Explicitly call slideUp or slideDown instead of slideToggle.

You make some element appear on top of another element by settings its CSS z-index property to a higher value. Make sure to also set a position property on that element.

Thanks Dan but Im not sure I’ve explained it correctly.

I would like to slide the box out in an upward direction — please see this diagram

Do I need to abandon the jquery slide functions and look into the animate function?