The code to make the header work isn’t really that big. The HTML & CSS all depend upon your header. In my case you can see the HTML actually looks like this:

<div id="header">
	<div id="iLarge">
		<div id="intro">
			<p class="large">Hello, my<br />name is Paul.</p>
			<p>Welcome to Return True. I like messing with <a href="/category/html/" title="View all posts in the HTML category">HTML</a>, playing with <a href="/category/php/" title="View all posts in the PHP category">PHP</a>, experimenting with <a href="/category/css/" title="View all posts in the CSS category">CSS</a>, and fiddling with <a href="/category/jquery/" title="View all posts in the jQuery category">jQuery</a>.</p>
		</div>
	</div>
</div>

Via CSS the background image is added and the height set to it’s starting height (which is closed). Like this:

#header {
    background: url("/wp-content/themes/returntrue/images/layout/iesquare.png") repeat scroll left top transparent;
    overflow: hidden;
    padding: 1px 0 0;
    width: 100%;
    height: 213px;
}

The 1 pixel padding is just to fix a bug with the margin in Firefox 3.6+.

jQuery Cookies

To remember if you’ve visited the site before we use the jQuery cookie plugin. We could use a bit of PHP but if you have a cache installed it doesn’t always work so I have found using jQuery to manipulate the cookie a lot easier. You can get the jQuery cookie plugin here.

The jQuery Code

Finally we can take a look at the jQuery magic that makes this happen.

jQuery(function($) {
	remember = $.cookie('rtHeader');
	open = false;
	$('#openclose').click(function () {
		if(open == true) {
			$('#header').stop().animate({ height: '213px'});
			open = false;
		} else {
			$('#header').stop().animate({ height: '594px'});
			open = true;
		}
	});
	if(remember == null) {
		$.cookie('rtHeader', 'true', { expires: 7, path: '/' });
		setTimeout(function() {
			$('#openclose').trigger('click');
		}, 500);
	}
});

Okay. First we open the normal DOM ready method. Now we grab the data from our cookie, if it doesn’t exist it will come back as null. We also set open as false (because it’s closed to start).

Next we set our click event. It’s a simple switch. If open is true (our header is open) then run the closing animation and set open to false (because now it’s closed). Otherwise open is false (our header is closed) so open it and set open to true (because now it’s open).

Our last part checks to see if our cookie was null. If it was (as I said earlier) it hasn’t been created yet. So let’s create our cookie I name it ‘rtHeader’ with a value of ‘true’ and set it to expire in 7 days and set the path as the site root. Then we set a time out to open the header when the page finishes loading. This is as opposed to having it be open and then close after a period of time which I’m sure you can do by switching the code around a little.

That’s it. Let me know if you have any trouble implementing any of this, or you are stuck with something and I’ll get back to you asap. Also a small note for those waiting for an updated version of the ImageMagick in Timthumb hack. I’m having a few troubles with my install of ImageMagick at the minute so I’m afraid it will be a little later than planned. Sorry.