Last week I explained a simple show/hide method with jQuery to allow you to declutter your sidebar. However, the show/hide methods are not very graceful, but now that you have a basic understanding of jQuery, we can look into the other methods available for you to try out.

Sliding

Rather than an instant show or hide, a sliding animation is much nicer. This is a fairly quick change on what we had last week. Instead of the code

[sourcecode language=”html”]$(‘#archives’).click(function() {
$(‘#archives ul’).toggle();
});[/sourcecode]

We use the slideToggle() method instead eg.

[sourcecode language=”html”]$(‘#archives’).click(function() {
$(‘#archives ul’).slideToggle(‘slow’);
});[/sourcecode]

Notice I’ve also passed a parameter of slow, to control the speed at which it slides. This will then toggle between sliding up and sliding down of the archives list.

Fading

Another option is that you can use the fadeIn or fadeOut methods. There isn’t a toggle option of these methods, so we need to use the toggle method to call two functions. This works by running the first function on the first click, then the second function on the second click, then back to the first on the third click and so on. So the first function runs on the odd numbered clicks and the second on the even numbered clicks.

The code to do this is

[sourcecode language=”html”]$(‘#archives’).toggle(function() {
$(‘#archives ul’).fadeIn(‘slow’);
}, function() {
$(‘#archives ul’).fadeOut(‘slow’);
});[/sourcecode]

The fadeIn/Out methods are a nice animation effect however the sliding effect comes across with a bit more style in my opinion.

The Comment Form

So far the examples have been designed to target the sidebar, however we can also give the same effect to the comment form.

The WordPress comment form usually has an id of commentform, so we can use this as the target. We’ll also need a trigger, such as a heading to the form. Your theme file may already have this in however if it doesn’t then suggested code could be

[sourcecode language=”html”]

Leave a Comment

….

[/sourcecode]

Our trigger is now #jqcommentform and our target is #commentform. So for this to then do its job we need to modify our header code to include these in it. I’ll use the slideToggle method for this, and also include the archives and blogroll too:

[sourcecode language=”html”]jQuery(document).ready(function($) {
$(‘#archives ul, .categories ul, #commentform’).hide();
$(‘#archives, .categories, #jqcommentform’).css(“cursor”,”pointer”);
$(‘#archives’).click(function() {
$(‘#archives ul’).slideToggle(‘slow’);
});
$(‘.categories’).click(function() {
$(‘.categories ul’).slideToggle(‘slow’);
});
$(‘#jqcommentform’).click(function() {
$(‘#commentform’).slideToggle(‘slow’);
});
});[/sourcecode]

This would then work with the archives list, categories list and the comment form (note the selectors have been used from the Classic theme, you would need to check your own theme and possibly modify it to get this to work with that).

For an example of how this all works, you can view this on my own site.