As you can see on this blog, I have an “About Jason Gill” tab in my heading. When clicked, this tab reveals information about who I am by sliding upward. In figuring out how to do this, I of course consulted the Google gods and came up with a lot of people asking how, but few people providing answers. So, I’ve decided to post the solution I finally came up with hoping it will benefit others.

Basically, I am using two different effects to create what looks like one effect. What you are seeing is essentially a slideDown() in conjunction with an animate() effect. The animate() is literally moving the info box upward at the same speed it is sliding down (in my case, “slow”).  I just had to measure the height of the #about_me box and animate it upward exactly that many pixels (in my case it was 171 pixels). To close the box, I simply animate downward at the same rate I slideUp. Technically, I’m using animate in conjunction with slideToggle(), but you get the idea.

You can take a look at my source, but I’ll post the javascript here for your convenience:

$(document).ready(function(){
	var opened = false;
	$("#about_tab").click(function(){
		if(opened){
			$("#about_me").animate({"top": "+=171px"}, "slow");
		}else{
			$("#about_me").animate({"top": "-=171px"}, "slow");
		}
		$("#about_content").slideToggle("slow");
		$("#about_tab .close").toggle();
		opened = opened ? false : true;
	});
});