Question

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

Answer 1

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.