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

jquery css slidetoggle
joschaf picture joschaf · Jul 23, 2012 · Viewed 19.9k times · Source

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?

Answer

dstrachan picture dstrachan · Jul 23, 2012

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

Related questions

change slideToggle() behaviour to display:inline-block instead of display:block?

my target slideToggle() div needs to be display:inline-block instead of display:block when it's open. Is there a way to change the jquery behavior here? Edit: i'm using jQuery 1.7.0 at the moment. Also, the <div> is initially …

Read More
How to slide toggle a div right to left?

Please see this fiddle http://jsfiddle.net/MKwwH/ I want the link images-link to slide toggle right to left? $(document).ready(function() { $('.hidden').hide() }); $('.soundDiv-link').click(function() { $('#soundDiv').slideToggle("slow") }); $('.videoDiv-link').click(function() { $('#videoDiv').next().…

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More