Toggle TWO Panels with ONLY ONE VISIBLE Is it possible?

Question

I have two sliding panels. I need ONLY ONE panel open at a time. Right now they can both open. My project link is: link text

Here is my 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

I looked at the link you provided but I couldn't see the buttons.

Anyway. What you probably want is to show only either "#panel_quote" or "#panel_login". In that case I would recommend using hide() onload on one of them and then in one button toggle both like this:

$(".btn-slide").click(function(){
    $("#panel_login").slideToggle("slow");
    $("#panel_quote").slideToggle("slow");
});

Or if you really want to use both buttons, just add the other toggle to each button handler. And again, you can use the hide() onload. It is safer to proceed this way rather than giving initial css values to hide the panel because of users with javascript turned off.