Multiple slideup

JavaScript
1

Hi
my goal is :
get the panel slided of course :slight_smile:
but if you click an other div the panel should
closed itself and than slide.
I ended up with this code


<html>
<head>
<title></title>
<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
}
#container {
  width:500px;
  height:100px;
  overflow: hidden;   
}
#container div{
  float:left;
  width:100px;
  height:100px;
  line-height:100px;
}
#panel {
    background: #754c24;
    height:100px;
    display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var self= null;
    $("#container div").click(function(){
        if(self===null){
          self = this;
        }
        if(self===this){
          //$("#panel").slideToggle("slow");
          if($("#panel").is(':hidden')){
           $("#panel").slideDown("slow");
          }
          else{
            $("#panel").slideUp("slow");
          }
        }
        else{
          /* normal behaviour */
          self = this;
          $("#panel").slideUp("slow");
          $("#panel").slideDown("slow");
        }
        console.log(self);
        console.log(self===this);
    });
    
     
});
</script>
<body>
<div id="container">
<div>click</div><div>click</div><div>click</div><div>click</div><div>click</div>
</div>
<div id="panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
 Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
 Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla
</div>
</body>


</html>

Have you got any advice about the code ?
Bye.