CODEWITHSUNDEEP
javascriptjquerytoggleshow-hidesubmenu
L1900
L1900

Reputation: 147

How can I toggle a div and simulateously hide previously toggled divs?

When I click on any menu item the sub menu for that item shows. Which is great. Then when I click on any other menu item the first box/sub menu disappears and a new sub menu appears, which is also great. The problem is that the remaining/last sub menu does not go away. I want to be able to click on any of the menu items and make the remaining/last sub menu hide.

my url: http://arabic001.com

$(document).ready(function() {

       $('.menu').click(function()  {

       $('.subNav').hide();
          $(this).next().toggle('slow');


        });

        })

Upvotes: 0

Views: 253

Answers (1)

Prpl_Ppl_Etr
Prpl_Ppl_Etr

Reputation: 141

I just did this yesterday...

When I toggle something open I add a new class to the element, then when a new item is toggled, you can use the class you added as the selector to close the open item.

    $("#btn_toggle_transcript").on("click",
            function(){
                closeOpen("#transcript_container");
                $("#transcript_container").slideToggle(1000);
                $("#transcript_container").addClass('ToggleOpen');
            }
    );

function closeOpen(ignore){
    if(ignore!=''){
                $(".ToggleOpen:not('"+ignore+"')").slideUp(500);
                $(".ToggleOpen:not('"+ignore+"')").removeClass('ToggleOpen');
            }else{
                $(".ToggleOpen").slideUp(500);
                $(".ToggleOpen").removeClass('ToggleOpen');
            }    }

UPDATE: I removed the "ignore" bit I had in there. It was superfluous. This works great for me. I also changed the binding method to use the $(selector).on("event",callback) format.

UPDATE: Oops! I DID need that ignore in there. Otherwise the closing action would bounce open again. :(

Upvotes: 1

Related Questions