.slideToggle one div a time (Problems, Please Help)

Envato Authors Theme Authors
1

Hello All!

I am having some problems configuring the jQuery .slideToggle to only open one div per click. I have two links - each link toggles open/close a separate div - however if one div is open, and the link to toggle the second div is clicked, they both remain open and stacked on each other.

My goal is to configure this to only allow one div to be toggled open at a time. If the first div is open – clicking the link to toggle the second will close the open div.

It seems to be something quite simple, but I can’t seem to wrap my hands on it. Any help is much appreciated. Thank you.

Here is a jsFiddle Link:
http://jsfiddle.net/u7Y2r/28/

2

Maybe hide:

$(document).ready(function(){

    $("#open-one").click(function(){
        $("#box-two").hide();
      $("#box-one").slideToggle(600);
      $(this).toggleClass("active");
    });
    
    $("#open-two").click(function(){
        $("#box-one").hide();
      $("#box-two").slideToggle(600);
      $(this).toggleClass("active");
    });

});

http://jsfiddle.net/u7Y2r/35/

3

Hi iamthwee,

That is similar o what im looking to achieve - however - i need the open box to close completely before the closed box opens.

4

Here is an example…

Try clicking the ‘talk to us’ and ‘follow us’ links at the top for a similar behavior.

5

http://jsfiddle.net/u7Y2r/44/

6

Great! Thanks for the reply Tean.

7

Interested to know if there is still a possibilty to indicate the open div with the ‘active’ class. If you could make a suggestion, that would be great. Thanks.

8

This is what i came up with regarding indicating the active state - i’m still having an issue though. It seems as if the active class stays targeted for both classes when clicking from link to link. My goal is to have only one active class on for the open div box.

Here is the jsfiddle:
http://jsfiddle.net/u7Y2r/77/

9

Here: http://jsfiddle.net/u7Y2r/78/

added the removeClass method for each block

10

Sweetness. Thank you @ TopStudio

11

You can also use filter like here:

http://jsfiddle.net/u7Y2r/83/