jQuery toggle/vertical slider effect with multiple Divs

Question

Hi, 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;
 });  
});

Answer 1

I'm also as new as you are to jquery, but i guess if you used live property it would help you. as this :

$("#toggle a").live('click', function() { $(this).functionName(); });

Answer 2

SlideUp/SlideDown control visibility, not positioning. Use CSS or the document structure to control the relative positioning of the two DIVs when they are visible.

Answer 3

It's not tested but try something like this

<div id="toggle_holder">
  <div class="toggle"></div>
  <div class="toggle"></div>
</div>
<div id="button_wrapper">
  <button>button 1</button>
  <button>button 2</button>
</div>
<script type="text/javascript">
  // jquery already loaded...
  $(document).ready(function(){
    $('#button_wrapper button').click(function(){
      $('button', $(this).parent()).slideUp('slow');
      $(this).stop().slideDown('slow');
    });
  });
</script>