Simple jQuery Tutorial – Hiding A Box Of Content
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!
|
1 2 3 4 5 6 7 |
.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. 🙁
|
1 2 3 |
<a class="button" href="#">Press Here</a> <div class="box"> I am some content and I am going to be hidden & 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(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
12 Comments
Johnny
Nice show and hide a box! Can you explain how I could go about adding three columns of show/hide boxes that function independent from one another on the same page? Thanks Johnny
Paul Robinson
Hi Johnny,
You would need to target each box separately so that it can be toggled independently. To do this you could create a function from the code that open/closes the box like this:
That is the best way I can think of to do multiple boxes. It allows you to make multiple boxes with the JS code without pasting the code loads of times. Just remember to make CSS classes for each box or make 1 class you want applied to them all & add it as a secondary class like this:
I hope that helps. Let me know if you have any other questions. 🙂
Johnny
Hey Paul, thanks this works nice. I’ve got three links lined up to reveal three boxes of information, all functioning independent from one another now.
When I click on the first “press here #1” link it reveals it’s related box of information one the first click. However once a “press here #1” link has been clicked to reveal it’s box of information, the next “press here #2” and/or “press here #3” links require that you click twice to reveal their information box. Is it possible to make all the press here links open their box of related information on the first click?
Thanks for the help,
Johnny
Paul Robinson
Off the top of my head it may be the variables are being read through the function. Try putting
varin front of all of the lines that change or define the variablehiddenso for example:would be:
that should change the scope so the variables are only read within their own function.
I’m away from my computer though & cannot test it so I may be wrong. Let me know how it turns out.
Johnny
Thanks Paul,
That did the trick!
Paul Robinson
Good stuff Johnny. Glad I was able to help you out. 🙂
Paul
Hi Paul,
Love the animation effect. Quick question: is there a way to close the box if the user clicks outside of it?
Thanks!
(Paul)
Paul Robinson
Hi Paul,
That’s a tricky one. The only way (I can think of) to do it would be to add a large transparent element underneath the box that covers the entire page, and add a click event to close it to that element.
You’d have to make your box relative & add a z-index, then use jQuery to make your large transparent element. Maybe something like:
The overlay class would need to be made absolute and have a z-index higher lower than the box but higher than 1.
I honestly don’t know if any of that will work, but it’s all I can think of at the minute. Hope it helps.
Emma
Hi,
I am using your code to hide multiple boxes.
I get the same problem as Paul did, that I have to click a box twice if another one is open.
I have tried putting, var, infront of the places where it says hidden. However this doesn’t help. Could you please specify where I should put the vars.
Thank you soo much!
Paul Robinson
Hi Emma,
It’s because hidden is in the same scope as the others. Your best bet is to either put each piece of code inside a new DOM ready, so another:
Or you can rename the variable for each one.
You could also change the code to this:
That will fix the problem and make any
atag with the classbuttona trigger. You will need to replace//get box classwith a line of code to grab the target to open. So for example you could use the href attribute of youra. So if your hyperlink was:Then the missing code would be:
Noting of course that the box you are opening/closing would have to have an id that matches what you write in the href.
If you were using HTML5 you could use the data system instead but that is less compatible at the moment.
Hope that helps.
Tony
I found your code and it was really helpful. I did notice that there was a slight bounce at the end of the animation. The slide pops a few pixels down then back up. Any ideas?
Thanks,
Paul Robinson
Hi Tony,
Having a bounce is normally caused by the bounce easing being chosen, but easing is generally a separate jQuery plugin that you need to download. Other than that I’ve never seen bouncing occur before. 🙁