jQuery toggle visibility of animated elements - jquery-animate

Question

I have a page that's utilizing jQuery navigation buttons that should slide content into view when each is clicked. However, when another button is clicked, I need the currently viewed content to slide back out of view before the new content slides into view.
This is what I've done so far:
$("#rules-btn").click(function () {
var effect = 'slide';
var options = { direction: 'left' };
var duration = 700;
$('#rules-pane').toggle(effect, options, duration);
});
Here's my jsfiddle that shows how it acts now. Can anyone tell me how to hide currently viewed content when another button is clicked? Thanks.
By the way, I'm very new to jQuery...

Answer 1

Demo: http://jsfiddle.net/e6kaV/6/
HTML:
<div id="rules" class="pane-launcher"></div>
<div id="rules-pane" class="pane"></div>
<div id="scenarios" class="pane-launcher"></div>
<div id="scenarios-pane" class="pane"></div>
JS:
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'left' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});
CSS:
.pane-launcher{
position:absolute;
top: 0;
width:20px;
height:20px;
background-color:#000;
display:block;
}
#rules {
left:0px;
}
#scenarios {
left:40px;
}
.pane{
position:absolute;
left: 0;
height:50px;
display:none;
opacity:0.5;
}
#rules-pane {
top:50px;
width:200px;
background-color:#999;
}
#scenarios-pane {
top:60px;
width:170px;
background-color:#F00;
}
Remember: instead of dealing with lots of ids, it's better to use classes, both to add styles and event handlers.