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

JavaScript
1

Hi,

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?

2

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.

3

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

4

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