Close a div when other is opened Jquery

Question

I'm not very good at JavaScript/jQuery. I have code that opens a dropdown. I want to add code so that when one dropdown is opened the others close automatically.

Here's the script code:

var s;
ShowHideWidget = {

    settings : {
       clickHere : document.getElementById('clickHere'),
       dropdown_login : document.getElementById('dropdown_login')
    },

    init : function() {
        //kick things off
        s = this.settings;
        this.bindUIActions();
    },

    bindUIActions : function() {
        ShowHideWidget.addEvent(s.clickHere, 'click', function() {    
            ShowHideWidget.toggleVisibility(s.dropdown_login);
        });
    },

    addEvent : function(element, evnt, funct) {
        //addEventListener is not supported in <= IE8
        if (element.attachEvent) {
            return element.attachEvent('on'+evnt, funct);
        } else {
            return element.addEventListener(evnt, funct, false);
        }
    },

    toggleVisibility : function(id) {
        $(id).animate({
            left: "",
            height: "toggle"
        }, 500, function() {
        });
    }
};

(function() {
    ShowHideWidget.init();
})();

/*Script 2*/

var k;
ShowHideWidget = {

    settings : {
       clickHere2 : document.getElementById('clickHere2'),
       dropdown_signup : document.getElementById('dropdown_signup')
    },

    init : function() {
        //kick things off
        k = this.settings;
        this.bindUIActions();
    },

    bindUIActions : function() {
        ShowHideWidget.addEvent(k.clickHere2, 'click', function() {    
            ShowHideWidget.toggleVisibility(k.dropdown_signup);
        });
    },

    addEvent : function(element, evnt, funct) {
        //addEventListener is not supported in <= IE8
        if (element.attachEvent) {
            return element.attachEvent('on'+evnt, funct);
        } else {
            return element.addEventListener(evnt, funct, false);
        }
    },

    toggleVisibility : function(id) {
        $(id).animate({
            left: "",
            height: "toggle"
        }, 500, function() {
        });
    }
};

(function() {
    ShowHideWidget.init();
})(); 

Here's the HTML code:

<div id="clickHere" class="login_area">Sign up</div>
<div id="clickHere2" class="login_area">Login</div>

<div id="dropdown_login">
    <div class="dropdown_login_header">
        <div class="beeper_login"></div>
    </div>
    Hello World 111
</div>

<div id="dropdown_signup">
    <div class="dropdown_signup_header">
        <div class="beeper_value"></div>
        <div class="beeper_signup"></div>
    </div>
    Hello World 2222
</div>

Answer 1

You could wrap the drop downs in an extra div like this:

<div id="clickHere" class="login_area">Sign up</div>
<div id="clickHere2" class="login_area">Login</div>

<div>
    <div id="dropdown_login">
        <div class="dropdown_login_header">
            <div class="beeper_login"></div>
        </div>
        Hello World 111
    </div>

    <div id="dropdown_signup">
        <div class="dropdown_signup_header">
            <div class="beeper_value"></div>
            <div class="beeper_signup"></div>
        </div>
        Hello World 2222
    </div>
</div>

Then you could use the siblings() method.

toggleVisibility : function(id) {
    $(id)
        .siblings().hide()
        .end()
        .animate({
            left: "",
            height: "toggle"
        }, 500, function() {
        });
}

Instead of wrapping the drop downs in an extra div, you could add a class to each of the drop down divs. You could then use that class to filter the siblings. For example:

$(id).siblings('.drop-down').hide();

Answer 2

Add a class to dropdowns div identity them in jquery (say drop-down)

        <div id="dropdown_login" class="drop-down">
            <div class="dropdown_login_header">
                <div class="beeper_login"></div>
            </div>
            Hello World 111
        </div>

        <div id="dropdown_signup"  class="drop-down">
            <div class="dropdown_signup_header">
                <div class="beeper_value"></div>
                <div class="beeper_signup"></div>
            </div>
            Hello World 2222
        </div>

now you can hide the dropdowns anytime by $('.drop-down').hide() [this hides all the elements those matches drop-down in class name, so beware this name should not be used anywhere for class.]

in your case this code will come in

toggleVisibility : function(id) {

     $('.drop-down').hide();

    $(id).animate({
    left: "",
    height: "toggle"
  }, 500, function() {