jQuery Panels - Toggle one DIV closed before Toggling open another one!

I have the following code.

I am wondering if there is a way to detect if a panel is toggled on and if so, automatically toggle it off before toggling another one on? This detect should happen when a user clicks the buttons.

I tried adding a "hide" function into each panel function but it didn't work as desired. This is my current code:

    $(function() {
    $("#panel-2-button").click(function() {
        $("#content-inner-panel-2").toggle("slide", { direction: "left" }, 1000); 
    });
    $("#panel-2-button-medium").click(function() {
        $("#content-inner-panel-2-medium").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-button-large").click(function() {
        $("#content-inner-panel-2-large").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-button").click(function() {
        $("#content-inner-panel-3").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-button-medium").click(function() {
        $("#content-inner-panel-3-medium").toggle("slide", { direction: "left" },开发者_开发知识库 1000);
    });
    $("#panel-3-button-large").click(function() {
        $("#content-inner-panel-3-large").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close").click(function() {
        $("#content-inner-panel-2").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close-medium").click(function() {
        $("#content-inner-panel-2-medium").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close-large").click(function() {
        $("#content-inner-panel-2-large").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close").click(function() {
        $("#content-inner-panel-3").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close-medium").click(function() {
        $("#content-inner-panel-3-medium").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close-large").click(function() {
        $("#content-inner-panel-3-large").hide("slide", { direction: "left" }, 1000);
    });
});

Hope someone can help. Zach

---

The easiest way is:

Assign a class to all the panels (like .togglepanels);

OnClick, first hide all the .togglepanels like this:

$(".togglepanel").hide("slide", { direction: "left" }, 1000);

then toggle open the one you want open.

---

the best way to do it is: toggle all divs off before toggling something on. Create a separate function for that (ToggleAllOff).

---

You need to do this in two steps, give a class of panel to all your panels. Then use following code:

$(document).ready(function(){
    $('.panel').hide("slide", { direction: "left" }, 1000);
});

$('.panel').live('click',function(){
    $('.open-panel').hide("slide", { direction: "left" }, 1000);
    $(this).addClass('.open-panel').toggle("slide", { direction: "left" }, 1000);
});

This code will 1. close all panel when page is loaded 2. close all open panels when any other panel is opened

---

You can bind a mousedownoutside handler to each div and hide all others there. You'd need this jquery plugin to enable the outside events.

---

If I read your question correctly, you said automatically toggle it off before toggling another one on?

From jQuery docs:

.hide( [duration,] [easing,] [callback] )
.hide( [duration,] [callback] )

The callback is called after animation is complete. So after you have hidden the element you can run .toggle inside callback function. This will then toggle the other div open after the other has closed (And not closing and opening at the same time).