sliding panels problem

sliding panels problem

Hy, i have two sliding panels, one vertically(on the top) and the other horizontally(on the left). the problem i have is that when the left one is visible the other one doesn't work properly

here is my code and thanks for helping.

<!doctype html><head><title></title>

<script type="text/javascript" src="jquery-1.4.2.js"></script>

    
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
$(".btn-edit").click(function(){
  $("#divButton").animate({
 "width": "toggle", "opacity": 1
}, { duration: "slow" });
});
});


</script>
    
<style type="text/css">
  
  body {
 background-color:#999;
margin: 0;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
/*position:relative;
z-index:1;*/
background: #754c24;
height: 100px;
display: none;
margin-left: 400px;
width: 500px;
}
.slide {
/* position:relative;
z-index:1;*/
padding: 0;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 400px;
background-image: url(images/btn-slide.gif);
background-repeat: no-repeat;
background-position: center top;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #422410;
width: 500px;
right: 400px;
}
.btn-slide {
/*position:relative;
z-index:1;*/
background: url(images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 164px;
height: 31px;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0;
}

#divButton
{
/*position:relative;
z-index:2;*/
float:left;
padding: 20px;
background-color:#1C1C1C;
height: 530px;
width:177px;
display: none;
margin-top: 200;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
position: relative;
top: 120px;
}
.slide_edit {
/*position:relative;
z-index:2;*/
/*position:absolute;*/
background-image: url(images/btn-slide-edit.gif);
background-repeat: no-repeat;
float:left;
margin: 0 0;
/*padding: 0;*/
border-left: solid 4px #422410;
background-position: center; /*border-top: solid 4px #422410;*/
position: relative;
top: 120px; /*background: url(images/2.gif) no-repeat center top;*/
}


.btn-edit {
/*text-align: center;*/
/*position:absolute;*/
width: 40px;
height: 570px;
padding: 0 0 0 0;
margin: 0 0;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
background-image: url(images/white-arrow-edit.gif);
background-repeat: no-repeat;
background-position: -50px 220px;
}

.active {
background-position: right 12px;
}
  

#divTop
{
position: absolute;
}
#divImg
{
position: absolute;
}


  </style>
  </head>
<body>

<div id="divButton">
 </div>
<p class="slide_edit"><a href="#" class="btn-edit">
</a></p>

<div id="panel">

</div>

<p class="slide"><a href="#" class="btn-slide">slide</a></p>
 

  
</body>

</html>