Согласованная работа элементов Slide меню

[VSko]

Извиняюсь за тупость но уже нервов не хватает на это дело.
Суть проста: есть меню, тоесть 2 вертикально выпадающих вкладки с левой и правой стороны экрана. Всё работает на ура, но при открытие правая вкладка открывается по верх левой. А нужно чтобы при открытие одной из вкладок закрывалась вторая если она активна. Я уже перерыл половину сего форума и так и не понял как это реализовать на "своём" примере. Буду рад любой помощи.

<script type="text/javascript">
$(document).ready(function(){
 $(".btn-slide").toggle(function(){
 $(this).parent().parent().find(".panel").animate({"width": "+=220px","height": "220"}, "slow");
 $(this).toggleClass("active"); return false;
 },function(){
 $(this).parent().parent().find(".panel").animate({"width": "-=220px","height": "220"}, "slow");
 $(this).toggleClass("active"); return false;
 }); 
});
</script>

<div class="body">
 <div class="left">
  <div class="panel">
  <ul>
  <li>Элемент меню</li>
  </ul>
  </div> 
  <p class="slide"><a href="" class="btn-slide">Меню</a></p>
 </div>
 <div class="right">
  <div class="panel">
  <ul>
  <li>Элемент меню</li>
  </ul>
 </div> 
 <p class="slide"><a href="" class="btn-slide">Меню</a></p>
 </div> 
</div>

Извиняюсь за громоздкость css по большей части в нём ничего важного нет.

<style type="text/css">
body {
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.body {
 padding:0;
}
.left{
 float:left; 
 width:164px;
}
.right{
 float:right; 
 width:164px;
}
.panel{
 background: #000;
 height: 265px;
 overflow:hidden;
}
.left .slide {
 position: absolute; 
 top: -150px;
 left: 30px; 
 line-height: 1px;
 border-left:solid 0px #000; 
 background: url(images/btn-slide-left.gif) no-repeat left center;
 height: 250px;
 width:38px;
 float:left;
}
.left .panel{
 float:left;
}
.right .slide {
 position: absolute;
 top: -150px; 
 right: 30px; 
 border-right:solid 0px #000; 
 background: url(images/btn-slide-right.gif) no-repeat left center;
 height: 250px;
 width:38px;
 float:right;
}
.right .panel{
 float:right;
}
.left .btn-slide {
 background: url(images/white-arrow-hor.gif) no-repeat -45px 80px;
 text-indent: -9000%;
 display: block;
 height: 250px;
 width:38px;
}
.right .btn-slide {
 background: url(images/white-arrow-hor.gif) no-repeat 15px 80px;
 text-indent: -9000%;
 display: block;
 height: 265px;
 width:38px;
}
.left .active {
 background-position: 10px 80px;
}
.right .active {
 background-position: -45px 80px;
}
.panel ul {
 list-style:none;
 border-bottom:0px solid #333;
 padding:10px;
}
.panel ul a{
 font-weight:bold;
 color: #000;
 white-space: nowrap;
}  
</style>

Здесь можно увидеть как это выглядит => http://vs-anime.at.ua/

[TicTac]

$(document).ready(function(){
     $(".btn-slide").toggle(function(){

         var thisPanel = $(this).parent().parent().find(".panel");
         $(".panel").not(thisPanel).animate({"width": "-=220px","height": "220"}, "slow");
         thisPanel.animate({"width": "+=220px","height": "220"}, "slow");
         

         $(this).toggleClass("active"); return false;
     },function(){
     $(this).parent().parent().find(".panel").animate({"width": "-=220px","height": "220"}, "slow");
     $(this).toggleClass("active"); return false;
     });
    });

[VSko]

Спасибо огромное вчера весь день убил ходя вокруг да около так и знал что просто, но моих знаний в частности C++ тока на понимание html и немного css хватает =) СПАСИБО!