slideToggle to move the div up above the content

Question

As shown on jsfiddle, clicking on top, it toggles the <div> below.

What I tried to do is this: On clicking "TOP"/ black box, that div and the div below should come up and overlay on text.

As #ppForm <div> pushing #we <div> to open upwards vertically.

It is when #ppForm opens it should push the div upwards vertically...

What does the last sentence mean? – phant0m Aug 04 '12 at 10:09 — phant0m, Aug 04 '12 at 10:09

KooiInc · Answer 1 · 2012-08-04T11:00:28.800

1

try

$('#we').click(function () {
   $("#ppForm").css('position','absolute').slideToggle("slow");
});

Or maybe you mean something like this?

edited Aug 04 '12 at 11:00

answered Aug 04 '12 at 10:11

KooiInc

score 1 · Accepted Answer · answered Aug 04 '12 at 10:39

1

Modified the style of these two elements and now it seems to work as needed:

.wrapper {
    position:relative;
}

#ppForm {
    position:absolute;
    bottom:120%; /* instead of top:0; */
}

answered Aug 04 '12 at 10:39

Stano

thanks this is what i wanted... I tried it a lot in different ways but couldn't make it.. :) – harnish Aug 06 '12 at 04:32
one more thing @Stano, i want we div to be pushed up when div opens up. i.e. on click of TOP the div should open up from bottom and push TOP div upwards. – harnish Aug 06 '12 at 04:43
Thanks. If you change the style back to `#ppForm {position:relative;}`, it will shift the div up. Only problem is the page is not scrolling to the bottom. [I was looking for some solution and found here](http://stackoverflow.com/questions/172821/detecting-when-a-divs-height-changes-using-jquery): [Ben Alman's resize plugin](http://benalman.com/code/projects/jquery-resize/docs/files/jquery-ba-resize-js.html), it can be used when some element is resized. [Updated fiddle is here](http://jsfiddle.net/AMhsb/6/). I don't think it's ideal solution, but dunno other way to stick the div at the bottom. – Stano Aug 06 '12 at 08:01
thanks for the input, it's the way i want, but onClick the TOP div should go up as heading and the yellow div in the bottom. Such that TOP become's heading and shifts to top. – harnish Aug 06 '12 at 10:11
1

@harnish Great :), I also tried to modify it [like this](http://jsfiddle.net/AMhsb/8/), but it's much better that you made it by yourself without that additional plugin! :-) Btw, the console says 'e is not defined', so either add the e event, or delete e.preventDefault(); – Stano Aug 06 '12 at 10:28

score 0 · Answer 3 · answered Aug 04 '12 at 10:04

0

I think you need like this:

Keep your <div id="ppForm"></div> after <div id="we"> and try

answered Aug 04 '12 at 10:04

RDX RaN

3 Answers3