Panel should slide up from the bottom and push content up, no overlay

Question

I'm quite new to jQuery but I'm almost certain that what I want to achieve is possible somehow.

I have a page with a navbar fixed at the bottom. The navbar has a button which should toggle an extra panel which I would like to slide up from the bottom. Here is what I have so far: http://jsfiddle.net/E4yGh/

As you see the panel slides up over the rest of the page, which stays in place. What I want instead is have the rest of the page scroll up to reveal the panel. The page should scroll up exactly according to the height of the panel div, so that the bottom of the panel is fixed to the bottom of the page - ideally without having to specify the panel's height, so that it adjusts automatically.

How would I go about doing that?

Solution 1

By adding an id to the upper div, you can apply slideToggle() to the upper section of text. Add the following line to your jQuery click function: (this will toggle the entire upper div)

$("#upper").slideToggle("slow");

To only slide the upper div by the height of the bottom section, you could try using CSS properties and .animate()

EDIT:

An easy solution is to move the navbar to the top of the page and change the CSS position of the text to "relative". Here is an example

EDIT:

Here is what i believe you were looking for originally: Demo

Solution 2

As I understand, you want to create a navbar at the bottom that it would slide up and show more details when clicked. If so, you could have a look at this link CREATING A SLIDE UP FOOTER USING JQUERY.

Hope it would help, good luck.

Solution 3

Here ya go; Working example of your code