Leave a comment


Dec 10, 2009 | The many ways to hide using jQuery

JqUery logo

For those of you unacquainted with jQuery, my opinion is that it is the next best thing to toasted cinnamon-raisin bagels with cream cheese from Ess-a-Bagel. jQuery, which earned the Open Source Application of the year award for 2009, helps web developers attach wonderful functionality to existing sites with a very small footprint.

One of the things I really like about jQuery is that there are so many ways of doing the same thing. This of course can lead to a bit of madness when trying to remember what it is that you need to write, so I figured that it might be useful to have a sort of comparison:

1. $(‘.testbox’).toggle(‘slide’, {direction: ‘up’}, 500);



This will toggle the box up and down as you click on the trigger. Note the way in which the content that follows in the web page will stay where it is until the entire box is hidden, leading to a jumping effect.


2. $(‘.testbox’).slideToggle(‘500’);

This is another toggling box hide/show function, but the rest of the page’s content slides together with the box.



3. $(‘.testbox’).slideDown(‘500’);


This is another hiding trigger, except it won’t toggle, and the rest of the site will also slide. You can always mimic the behavior of the toggles by creating a flag that will determine whether or not the box is visible, and showing or hiding accordingly.


4. $(‘.testbox’).hide(“slide”, { direction: “up” }, 500);

This is the last example, showing a hiding event but with the site jumping after it hides.


I hope this is helpful! More tutorials to come soon!

This entry was posted on Thursday, December 10th, 2009 at 11:24 pm, EST under the category of Coding. You can leave a response, or trackback from your own site.