Inserting / inferring a div title / opening a partially hidden div

I would appreciate help and understanding of the solution to this problem. I am developing a website with a title bar of an initial visible height of 180 pixels. The div header is 340px in total height. When the user clicks on the link, I need the div title to slide down to show the rest (at the top). So, mathematically speaking, when the user loads the page, the bottom 180px from the 340px header will be displayed. When they click on the link, the rest of the div slides down to show its top 160 pixels. When the user clicks on the same link, the div title goes back, so that only the bottom 180px is displayed again.

I tried to get this to work, but I'm not sure what I'm doing wrong. My initial thinking was to use slideToggle () (hide / show), but I can't get this to work. Others at StackOverflow offer animate (), but I don't know how to make this work.

I was looking for StackOverflow and seems to have found a lot of questions regarding showing and hiding the whole div, but the problem is that it completely shows and hides the div. I need my div to slide down to open the top hidden part, and then return it to its original resting position (-160 pixels on the screen).

Any help would be greatly appreciated! I have included the starter code below:

HTML:

<div id="header">
    <a href="#header" class="toggle">Click me to reveal the top half of this div</a>
</div>

JQuery

$(document).ready(function(){
    $('.toggle').click(function(){
        $('#header').slideToggle("slow");
        return false;
    });
});

CSS

#header {
    position: fixed;  /*I would like this div to always be fixed to the top of the browser window*/
    top: 160px;
    left: 0;
    width: 100%;
    height: 340px;
    z-index: 10;
}