First. We want to download the JQuery Cookie Plugin (http://plugins.jquery.com/project/cookie) which will allow us to remember the state of the blocks (shown/hidden). Now upload that file to your theme's directory. Create a new file in a text editor. Call this file blocks.toggle.js. Type the following:

function toggle_block(id, target_id){

}

This function accepts two parameters. id and target_id. id is the clickable item that controls the collapsing/expanding. The variable target_id is the item that is shown/hidden. In this case the block's content.

Within the above function type the following:

$("#"+id).click(function() {

});

This binds the id to a click event. The function within it is executed every time the id is clicked. This is the part of JQuery that I love the most. It reminds me of Listeners in ActionScript.

Our code in blocks.toggle.js should now look like this:

function toggle_block(id, target_id){

$("#"+id).click(function() {

});

}

Now to the fun stuff... Type the following within the click function.

if($.cookie(target_id) != 'shown'){
$("#"+target_id).show('slow');
$.cookie(target_id, 'shown');
}else{
$("#"+target_id).hide('slow');
$.cookie(target_id, 'hidden');
}

All we are doing here is simply testing to see what the cookie reads and making JQuery react based on those parameters. In the first line 'if($.cookie(target_id) != 'shown'){', we are testing to see if the cookie's content does not equal 'shown' (the cookie's content would be 'hidden' or null) when the id selector is clicked. We simply show/hide the target_id based on the content of the cookie, which is this line $("#"+target_id).show('slow'); or $("#"+target_id).hide('slow'); respectively. We also control the speed at which the object collapses/expands, hence the 'slow' parameter in the 'show' function.

The next line $.cookie(target_id, 'shown'); simply sets the cookies content to 'shown' or 'hidden'.

Now our function should look like this:

function toggle_block(id, target_id){

$("#"+id).click(function() {
if($.cookie(target_id) != 'shown'){
$("#"+target_id).show('slow');
$.cookie(target_id, 'shown');
}else{
$("#"+target_id).hide('slow');
$.cookie(target_id, 'hidden');
}
});

}

We just need to add one more thing and we're done here. Underneath the toggle_block function add the following code:

if($.cookie(target_id) != 'shown'){
$('#'+target_id).hide();
}

Unlike the click event, there is no way for us to no what state the cookie is when the page loads. This function (which is located outside of the previous click function) reads the cookie's content and hides the element if it was previously hidden.

Please Note: The CSS that controls your block's content must NOT have 'display:hidden' as an attribute, as this code will not work.

Your finished code should now look like this:

function toggle_block(id, target_id){

$("#"+id).click(function() {
if($.cookie(target_id) != 'shown'){
$("#"+target_id).show('slow');
$.cookie(target_id, 'shown');
}else{
$("#"+target_id).hide('slow');
$.cookie(target_id, 'hidden');
}
});

if($.cookie(target_id) != 'shown'){
$('#'+target_id).hide();
}

}

We are now ready to save the file blocks.toggle.js and upload it to path_to_your_theme/blocks.toggle.js.