not tested

simple_accordion.html

HTML:
<div class="header with-cool-bottom-background-image"></div>
<div class="container">
  <div class="panels">
    <div class="panel1" style="display: none">
       <h1>Cool Default Content (homepage)</h1>
    </div>
    <div class="panel2" style="display: none">
       <h1>This nice content is hidden by default and will be displayed only on link click below.</h1>
    </div>
  </div>
</div>
<div class="navigation with-cool-top-background-image">
  <a href="page2.html">whaaa</a>
</div>

<script>
jQuery(function($) {
   // do an action on first page load
   $(".panels").hide(); // be sure to hide panels
   // automatically open the home panel (duration=1000ms)
   $(".panels .panel1").slideDown(1000);

   // do an action on link click
   $(".navigation a").click(function(e){
     e.preventDefault(); // we say: Browser, do nothing on click, we don't want to be redirected to the url "page.html"

     // first close panels
     $(".panels").slideUp(1000, function(){
        // then, wait 500ms... (this is not necessary)
        setTimeout(function(){
           // and slideDown (open) the second panel
           $(".panels")
              .find(".panel2")
                 // and add a fadeIn effect (this is not necessary)
                 .fadeIn(1000).end()
              .slideDown(1000);
        }, 500);
     });
   });
});
</script>