jquery sliding panel menu problem

[JessiBo]

There is a simple solution to this, I however have not been able to execute it correctly.

I have a top level navigation (that is dynamically populated) that when clicked reveals a hidden panel. This works. The problem is when another menu item is clicked, that panel is stacked on any panels that are already open. How do I close any open panels first before opening another one.

Below is my code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".page-item-4").click(function(){
$("#slide-panel-photo").slideToggle("slow");
});
$(".page-item-6").click(function(){
$("#slide-panel-video").slideToggle("slow");
});
});
</script>

You can see the (barely there) work in progress here http://www.jessicabo.com/max01/

Any help is greatly appreciated

[SB65]

You could add an additional couple of lines to hide the other panel, and use the callback on the hide to call the slideToggle:

$(document).ready(function(){
$(".page-item-4").click(function(){
	$("#slide-panel-video").slideUp('slow',function(){
		$("#slide-panel-photo").slideToggle("slow");
	});
});
$(".page-item-6").click(function(){
	$("#slide-panel-photo").slideUp('slow',function(){
		$("#slide-panel-video").slideToggle("slow");
	});
});
});

This is OK if you've just got a couple of panels, as now, but will quickly get tedious with any more.

If you do intend to have more than one I'd redo your html so that the lists within the sidepanel are nested within the top level lists - so it becomes more like a standard drop down menu, then add some jQuery for the animation - it'll take a bit more effort initially but might be easier in the long term.