Animate a Contact Us Slide-Out Area using jQuery

Contact us pages are usually boring static pages with a form, not very exciting so what we’re going to do is place the contact us form at the top of the page and create a button that slides out and reveals the form when clicked. All with the help of our little friend, jQuery.

contactjQuery

View the Demo Download Files (.zip)

First we start of with the necessary file includes:

<link rel="stylesheet" href="contact.css"/>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="contact.js" type="text/javascript"></script>

We’re using jQuery 1.3 hosted by Google, the jQuery easing plugin and our own custom code in the contact.js file. Make sure that the jQuery library comes first, followed by the plugin(s) and finally your code that makes the magic happen.

Let’s set the height of the contactArea div to the desired height in the css. We’re going to hide it with jQuery so that anyone with javascript turned off will still see the form and be able to use it.

#contactArea { height: 225px; }

Of course we need to start off with the $(document).ready() function so that jQuery knows what code to load and use.

$(document).ready(function() {

        // put all your jQuery goodness in here.

});

The first line of code is going to be the code mentioned earlier to hide the contactArea div. Here we are basically telling jQuery to set the height of #contactArea to 0.

$(document).ready(function(){ 

	$("#contactArea").css('height', '0px');
});

Right, time to tell jQuery to do something when the button is clicked. Obviously we want the contact us area to slide out from the top of the page to reveal the form. We will also want to hide the area when the button is clicked again. This is achieved by using jQuery’s built-in toggle function.

$(document).ready(function(){ 

	$("#contactArea").css('height', '0px');

	$("a.contact").toggle(
		function () {
 			$("#contactArea").animate({height: "225px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
                },
                function () {
			$("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
		}
	); 

});

Basically what is happening here is that the toggle function is toggling between two different functions. One displays the full height of #contactArea and the other sets the height to 0, hiding it. By the simple use of .animate and setting the duration (milliseconds), jQuery animates between the two height values. The easeOutBounce value ties in with the jQuery easing plugin that adds a bit of a fun element that keeps things interesting. I’ll let you view the demo to see what it does.

UPDATE: See Joel’s comment below on how to prevent a jolt effect that happens if the height of the page becomes taller than the browser window, causing the scroll bar to appear during the animation and vice versa.

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: