jQuery переключить видимость анимированных элементов

Question

У меня есть страница, в которой используются кнопки навигации jQuery, которые должны перемещать контент во время просмотра каждого щелчка. Однако, когда нажата другая кнопка, мне нужно, чтобы текущий просмотренный контент возвращался из режима просмотра до того, как новое содержимое переместится в поле зрения.

Это то, что я сделал до сих пор:

$("#rules-btn").click(function() { 
    var effect = 'slide'; 
    var options = { direction: 'left' }; 
    var duration = 700; 
    $('#rules-pane').toggle(effect, options, duration); 
}); 

Вот мой jsfiddle, что показывает, как он действует в настоящее время. Может ли кто-нибудь сказать мне, как скрыть просматриваемый контент, когда нажата другая кнопка? Благодарю.

Кстати, я новичок в 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; 
} 

Помните: вместо того, чтобы иметь дело с большим количеством идентификаторов, то лучше использовать классы, как для добавления стилей и обработчиков событий.