Push Content In Container Down On Click, Load Content Into Space Revealed Jquery

I have a container full of content. Im trying to click a button, and push all the content downward, say 700px. Once the content is pushed down, a new page loads into the space th

Solution 1:

Look at the jquery Effects and Manipulation API

http://api.jquery.com/category/effects/

http://api.jquery.com/category/manipulation/

These steps should suffice

1. Insert an empty DIV over your current content DIV.
2. Using CSS either move the content DIV down (by adding a top margin) or add a bottom margin to your empty DIV
3. Populate your new DIV with content
4. If you want to reverse it, just remove the margin you added.

Solution 2:

<button id="showHideTopContent">Show Hide Content</button>

<div id="container">
    <div id="topContent" style="display:none;">
        This is top content
        <hr />
    </div>
    <div id="topContent" style="display:none;">
        This is bottom content.
    </div>        
</div>

<script type="text/javascript">
    $(function() {
        $("#showHideTopContent").click(toggleTopContent);
    });

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

      if(!topContent.is(":hidden")) {
        topContent.hide();
        bottomContent.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");
      }
    }
</script>