Push content in container down on click, load content into space revealed Jquery - Part 2

Before I begin, please reference this link which is Part 1 of my issue:

Push content in container down on click, load content into space revealed Jquery

Now this is what it looks like after I've implemented the code from the prior example:

http://flexbeltsite.info/TestPages/SlideUpandDown.html

Its close, but not 100% what i want. When you click the button for the 2nd time, I want the animation to play exactly in reverse, at the same slow speed... bringing the container back to the top, and hiding the top content. Currently, the code im using is making the entire page disappear totally when the button is pressed the second time. I do not want that.

-Bonus-

I also would like to, if at all possible, lock the header to the bottom of the page at a min-height when the button is first pressed to slide down. The header would only be able to come up only so high when the window is开发者_StackOverflow社区 shrunk, but if the window is fully expanded, the header is locked to the bottom of the page. In a nutshell, You basically will see the header become the footer when the button is first pressed.

Not only that, I want to remove the ability to scroll the page down so that you can see the slid down container contents. There should be no scroll bars once the container drops after pressing the slide down button.

-Final Bonus-

I would like to externally load another page automatically into the topContent div once the container is slid down and the top content is fully revealed.

I hope I can get help on this. Itd also be great if the coders who provide answers have contact info avaliable in case I need to need to follow up on your response

I revised your Jquery code for the first part of your question:

<script> 
    $(function() {
        $("#MyProfile_Button").click(toggleTopContent);
    });

    function toggleTopContent() {
      var topContent = $("#topContent");
      var bottomContent = $("#Container");

      if(!topContent.is(":hidden")) {
        topContent.slideUp("slow");
      } else {
        // if you want the content to come from AJAX or so do it here
        //       ....
        //   If you do so, the topContent div should remain there, but empty.

        $("#topContent").slideDown("slow");
        //$("#Container").slideUp("slow");
      }
    }
</script> 

See it action--you can see the fiddle here: http://jsfiddle.net/2bTSr/

Bonus Question 1

Sounds like you need to set the height of the #topContent to document to the $(window).height - $(#header).height, which would push your header into the correct position. This combined with an overflow : hidden on the body will disable your scroll bars.

I'll have a fiddle shortly.

Edit:

Here's a fiddle showing the above idea: http://jsfiddle.net/L9sSv/ -- I'm not manipulating your CSS or other code much, mainly just the Jquery. Hopefully this starts pointing you in the right direction.

For the second bonus question, you'd want to use Jquery's .load() after your slidedown (or potentially as a callback function,) which you can read about here--I'm sure you can get the rest! ;)

Edit:

Check out this fiddle... http://jsfiddle.net/wgYMQ/

Basically I took the overflow : hidden off the body tag stylesheet, and put $("body").css({overflow : "hidden"}); in the function toggleTopContent()'s else statement, and $("body").css({overflow : "auto"}); in if. That fixes your scroll bar.

To get the header stuck at the bottom, I'd say apply some fixed/absolute positioning to it within the else as well.