jQuery toggle/vertical slider effect with multiple Divs

Actually, I am new to jQuery and I am writting a sample page with jQuery functions. In this page I am making use of toggle function. Please help me to get the intended effect. I am trying to get it but it is not working properly.
The effect I am trying to apply is;

1. There are 2 buttons on the page, say Button1 and Button2.


2. There are 2 Divs, say Div1 and Div2.


3. Initially both Divs are hidden and only 2 buttons are visible.


4. If Button1 is clicked, Div1 should get toggle down and vice versa.


5. If Div1 is in open state and Button2 is clicked, Div1 should go up slightly and Div2 should fall down.

I have written some code with CSS applied on it. But I am not getting the sliding effect as it gives with only one Div.

I have written Javascript as;

var IsPanelDown = false;
 var IsPanel2Down = false;
 
 $(document).ready(function() {
 
  // Expand Panel
  $("#open").click(function(){
  if (IsPanel2Down == false)
  {
      $("div#panel2").slideUp("slow");
      IsPanel2Down = false; 
  }
   $("div#panel").slideDown("slow");
      IsPanelDown = true;
  }); 
 
  // Collapse Panel
  $("#close").click(function(){
   $("div#panel").slideUp("slow"); 
   IsPanelDown = false;
  });  
 
  // Switch buttons from "Log In | Register" to "Close Panel" on click
  $("#toggle a").click(function () {
   $("#toggle a").toggle();
  });  
 
   $("#toggle2 a").click(function () {
   $("#toggle2 a").toggle();
  });  
 
  $("#open1").click(function(){
  if(IsPanelDown == false)
  {
 
   $("div#panel").slideUp("slow"); 
   IsPanelDown = false;
  }
   $("div#panel2").slideDown("slow");
      IsPanel2Down = true;
  }); 
 
  // Collapse Panel
  $("#close1").click(function(){
   $("div#panel2").slideUp("slow"); 
   IsPanel2Down = false;
  });  
 });
 

---