Simple jQuery Tutorial – Hiding A Box Of Content

by Paul Robinson on 02.09.2009 | 8 comments

So continuing on with my simple tutorials for people who are just learning to code. Here is a simple jQuery tutorial that will show you [...]

So continuing on with my simple tutorials for people who are just learning to code. Here is a simple jQuery tutorial that will show you how to make the classic box that hides content when a button is clicked, but with a fancy sliding animation. Now if you have experience with jQuery you may say: “Well Paul there is already a pre-defined function for doing that.”  and you would be correct. However that pre-defined function has, in my opinion, a horrible animation when it hides the box. So here is how to do a better version.

Some CSS

So first we need a little bit of CSS to make a box with or you won’t be able to see the animation work very well. Here is some simple CSS to make a box from a div with a class of box… Original, huh!

.box {
	width:200px;
	height:60px;
	border:1px solid #999;
	background-color:#FFC;
	display:none; /*This is to make the box hidden by default, remove if you don't want it hidden by default.*/
}

On To The HTML

Now we need some HTML to hide. You can make up your own or you can copy the HTML I used below. It’s ugly, but it’s only meant to prove that the code works, hey I’m not a designer, just a coder… Pitty.

<a class="button" href="#">Press Here</a>
<div class="box">
I am some content and I am going to be hidden &amp; then open.</div>

Right, Onto The jQuery

Ok, now that we are all set up let’s get on with the simple jQuery code that makes this work:

$(document).ready(function(){
 hidden = true;
 $("a.button").click(function () {
	if(hidden == false) {
 		$("div.box").slideUp('slow');
		hidden = true;
	} else {
		$("div.box").slideDown('slow');
		hidden = false;
	}
 });
});

Well, I guess I had better try to explain that mash of code. First off we use the ever famous jQuery DOM ready feature to execute or ready the script when the DOM has finished loading. That means the code & page structure has loaded, but not the pictures and other stuff. Next we set a variable called hidden to true, change this to false if you removed the display:none; from the CSS. This variable will be our switcher, it will keep track of whether our content is hidden or not.

Next we set up a click event on the a with the class of button. You don’t have to use an a it could be a button or even just a div, but this is the easiest since people recognise it as a link & a bound to click it. In the click function, what to do when it’s clicked, we check our hidden variable to see if it is set to false (not hidden) or true (hidden). If hidden is false on click we know the content needs to be hidden so we use slideUp to slide the content nicely closed then set hidden to true since the content is now hidden. Otherwise we do exactly the opposite.

See it’s actually quite simple. Again jQuery already has a function called toggle which does all this for you, but if you want a nice animation then I wouldn’t advise using it. If however you just want to toggle something open & closed then you can use the toggle function without the animation. Check this page at the jQuery docs for more on how to do that.

Below is a link to a small demonstration that will open in a lightbox window. There is both a default toggle animation done by jQuery & my custom toggle. Give them a try & see which you prefer.

Wanna try the code? Click here