Using JQuery to reveal using a slide up effect

The slideUp() method in JQuery is intended to hide the element rather than reveal it. It is basically the opposite of slideDown() which “unhides” your element by sliding it down.

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;
	});
});