<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>