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

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