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:

<buttonid="showHideTopContent">Show Hide Content</button><divid="container"><divid="topContent"style="display:none;">
        This is top content
        <hr /></div><divid="topContent"style="display:none;">
        This is bottom content.
    </div></div><scripttype="text/javascript">
    $(function() {
        $("#showHideTopContent").click(toggleTopContent);
    });

    functiontoggleTopContent() {
      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>