Alternate hide and show

Alternate hide and show

Hi...
 
I am looking at Karl Swedberg's tutorial for hiding and showing items, a very good tutorial indeed!
 
 
I took the exsisting JS, copied, pasted and edited it so that I get 2 boxes working on my page.
 
As follows:

$(document).ready(function() {

// hides the slickbox as soon as the DOM is ready (a little sooner that page load)

$('#slickbox').hide();

// hides the slickbox as soon as the DOM is ready (a little sooner that page load)

$('#slickbox2').hide();

// shows and hides and toggles the slickbox on click

$('#slick-show').click(function() {

$('#slickbox').show('slow');

return false;

});

$('#slick-hide').click(function() {

$('#slickbox').hide('fast');

return false;

});

$('#slick-toggle').click(function() {

$('#slickbox').toggle(400);

return false;

});

// slides down, up, and toggle the slickbox on click

$('#slick-down').click(function() {

$('#slickbox').slideDown('slow');

return false;

});

$('#slick-up').click(function() {

$('#slickbox').slideUp('fast');

return false;

});

$('#slick-slidetoggle').click(function() {

$('#slickbox').slideToggle(400);

return false;

});

 // box 2!

// shows and hides and toggles the slickbox on click

$('#slick-show2').click(function() {

$('#slickbox2').show('slow');

return false;

});

$('#slick-hide2').click(function() {

$('#slickbox2').hide('fast');

return false;

});

$('#slick-toggle2').click(function() {

$('#slickbox2').toggle(400);

return false;

});

// slides down, up, and toggle the slickbox on click

$('#slick-down2').click(function() {

$('#slickbox2').slideDown('slow');

return false;

});

$('#slick-up2').click(function() {

$('#slickbox2').slideUp('fast');

return false;

});

$('#slick-slidetoggle2').click(function() {

$('#slickbox2').slideToggle(400);

return false;

});
});
 
My question is, how can I get ' slickbox' to hide if i show or toggle 'slickbox2' ......at the moment they both appear if i dont hide 'slickbox' before showing 'slickbox2'.
 
Thanks!
 
AMWJ