CODEWITHSUNDEEP
jqueryuser-interfacetogglejquery-animate
Zach Nicodemous
Zach Nicodemous

Reputation: 9487

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

Upvotes: 4

Views: 2718

Answers (5)

Pehmolelu
Pehmolelu

Reputation: 3564

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).

Upvotes: 0

Bozho
Bozho

Reputation: 597046

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.

Upvotes: 0

Tarun
Tarun

Reputation: 5514

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

Upvotes: 0

cbrandolino
cbrandolino

Reputation: 5883

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.

Upvotes: 3

Scherbius.com
Scherbius.com

Reputation: 3414

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

Upvotes: 0

Related Questions