CODEWITHSUNDEEP
jqueryhtml
Stian Berg Larsen
Stian Berg Larsen

Reputation: 553

jQuery - Animated Collapsible DIV, sliding up?

I'm using this jQuery script to animate a div to open/close when the user clicks a button: http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Is there any way to make it slide up, instead of down?

What I mean is: Instead of the DIV opening downwards (extending the area below it), is it possible for it to extend the content on top of it, so that it doesnt extend downwards?

Blarh, I'm finding it hard to describe.

Example:

Before:
1###TOP OF PAGE###
2#################
3#################
4#################
5#################
6######BUTTON#####
7###HIDDEN DIV####
8##BOTTOM OF PAGE#

After:
1###TOP OF PAGE###
2#################
3######BUTTON#####
4#####OPEN DIV####
5####CONTENT######
6####CONTENT######
7####CONTENT######
8##BOTTOM OF PAGE#

Instead of like this, as default:
1###TOP OF PAGE###
2#################
3#################
4#################
5#################
6######BUTTON#####
7#####OPEN DIV####
8####CONTENT######
9####CONTENT######
10###CONTENT######
11#BOTTOM OF PAGE#

Sorry for my crappy explanation, but I hope you understand :P

Thanks!

Upvotes: 3

Views: 16759

Answers (1)

Evan Levesque
Evan Levesque

Reputation: 3213

you can use JQuery slideUp to hide an element or JQuery slideDown to display an element
also you can use JQuery slideToggle to toggle the element

and this is an example

Upvotes: 8

Related Questions