jQuery toggle/vertical slider effect with multiple Divs -

Actually, I'm new to jQuery and I am writing a sample page with jQuery functions. In this page I am using the toggle function. Please help me get the intention effect I am trying to get it but it is not working properly. What I am trying to implement is that;

1. On the page there are 2 buttons, say button 1 and button 2.
2. In it, div1 and div2 are called.
3. Initially both the divisions are hidden and only 2 buttons are visible.
4. If button 1 is clicked, then diva must be
5. If div1 is in open position and click on button 2, div1 should go up a bit and below div2 Should fall.

I have written some code with css applied to it. But I can not find the sliding effect because it only returns with a single device.

I have written as Javascript;

  var IsPanelDown = false; Var IsPanel2Down = false; $ (Document) .ready (function () {// Expand panel $ ("#Open"). Click (function () {if (IsPanel2Down == false) {$ ("div # panel2"). "Slow" "(" slow "); slideshots = true;}); // collapse panel $ (" # off "). (Function () {$ (" Div # panel "). SlideUp (" Slow "); Click on" $ "(" # Toggle ") for" Sign In "in" Close Panel ". (Function () {$ (" # Toggle a "). Toggle ();}); $ (" # toggle2 a "). Click (function () {$ (" # toggle2 a "). Toggle ();} $ (" #Open1 ") Click Do (function SlideUp ("Slow"); IsPanelDown = false;} $ ("div # SlideUpdate" (IsPanelDown == Incorrect); {{(IsPanelDown == Wrong); IsPanel2Down = true;}) // Collapse Panel $ ("# close1") (function () {$ ("div # panel2"). SlideUp ("slow"); IsPanel2Down = false;});});   
 
 
 slide up / slide down control visibility, no status. 
 
  Use CSS or document structure to control the relative position of the DIV.