Toggle TWO Drop Down Panels

Question

I am using two panels at the top of my web page that drop down: "Fast Quote" and "Client Login". Can someone show me how to alter my code so that ONLY ONE panel is open at one time? Example: If "Client Login" is open and the user clicks on "Fast Quote", the "Client Login" should close and the "Fast Quote" drops down.

Here is my website: http://www.ubspack.com

CODE:

$(document).ready(function(){
 $(".btn-slide").click(function(){
  $("#panel_quote").slideToggle("slow");
  $(this).toggleClass("closeQ"); return false;
 });
 });



  $(document).ready(function(){
 $(".btn-slide2").click(function(){
  $("#panel_login").slideToggle("slow");
  $(this).toggleClass("closeL"); return false;
 });
});

Answer 1

Try something like:

    $(document).ready(function(){
     $(".btn-slide").click(function(){
          return Toggle()
     });

     $(".btn-slide2").click(function(){
          return Toggle()
     });

    });

function Toggle() {
     $(".btn-slide1").toggleClass("closeQ");
     $(".btn-slide2").toggleClass("closeL");
}

Calling Toggle() will toggle both classes at the same time - then it's simply a case of making sure one has the class applied to start with...

Answer 2

you would just close the other panel in your click handlers.

$(document).ready(function(){
  $(".btn-slide").click(function(){
    $("#panel_quote").slideToggle("slow");
    $(this).toggleClass("closeQ"); 
    $("#panel_login").slideUp();
    return false;
  });

  $(".btn-slide2").click(function(){
    $("#panel_login").slideToggle("slow");
    $(this).toggleClass("closeL"); 
    $("#panel_quote").slideUp();
    return false;
  });
});