Hide/close drop down automatically when other drop down is active/open

Question

On top of my site i have the 2 links 'Account' and the Language selector. After i click the 'Language selector', the dropdown opens. But when i click on the 'Account' link i want the Language selector-dropdown to hide/close?

• The 'Account' link is a default Magento 1.9 jQuery functionality
• The language selector i built with this plugin

Thanks in advance.

UPDATE QUESTION:

To be more clear and specific. Just what i want is: If i click outside of the 'Account link' <a class="top-account skip-link skip-account skip-active"> <span class="label">Account</span> </a> i want the drop down to hide/close.

Here i found the Magento Javascript code of the Skip links:

    // =============================================
// Skip Links
// =============================================

var skipContents = $j('.skip-content');
var skipLinks = $j('.skip-link');

skipLinks.on('click', function (e) {
    e.preventDefault();

    var self = $j(this);
    // Use the data-target-element attribute, if it exists. Fall back to href.
    var target = self.attr('data-target-element') ? self.attr('data-target-element') : self.attr('href');

    // Get target element
    var elem = $j(target);

    // Check if stub is open
    var isSkipContentOpen = elem.hasClass('skip-active') ? 1 : 0;

    // Hide all stubs
    skipLinks.removeClass('skip-active');
    skipContents.removeClass('skip-active');

    // Toggle stubs
    if (isSkipContentOpen) {
        self.removeClass('skip-active');
    } else {
        self.addClass('skip-active');
        elem.addClass('skip-active');
    }
});

$j('#header-cart').on('click', '.skip-link-close', function(e) {
    var parent = $j(this).parents('.skip-content');
    var link = parent.siblings('.skip-link');

    parent.removeClass('skip-active');
    link.removeClass('skip-active');

    e.preventDefault();
});

UPDATE QUESTION:

Great thats working. But when you click both links 'Account' and 'Language'-links, both drop downs opens? I want a kind of toggle? If you click one the other close/hides..? How do i achieve this? The jQuery code from the Language selector is from ‘Polyglot’ Language Switcher 2'. See the link above.

Thanks.

Answer 1

Replace your current code with

var skipContents = $j('.skip-content');
var skipLinks = $j('.skip-link');

$j('body').click(function() {
   skipLinks.removeClass('skip-active');
   skipContents.removeClass('skip-active');
});

skipLinks.on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();

    var self = $j(this);
    // Use the data-target-element attribute, if it exists. Fall back to href.
    var target = self.attr('data-target-element') ? self.attr('data-target-element') : self.attr('href');

    // Get target element
    var elem = $j(target);

    // Check if stub is open
    var isSkipContentOpen = elem.hasClass('skip-active') ? 1 : 0;

    // Hide all stubs
    skipLinks.removeClass('skip-active');
    skipContents.removeClass('skip-active');

    // Toggle stubs
    if (isSkipContentOpen) {
        self.removeClass('skip-active');
    } else {
        self.addClass('skip-active');
        elem.addClass('skip-active');
    }
});

$j('#header-cart').on('click', '.skip-link-close', function(e) {
    e.stopPropagation();

    var parent = $j(this).parents('.skip-content');
    var link = parent.siblings('.skip-link');

    parent.removeClass('skip-active');
    link.removeClass('skip-active');

    e.preventDefault();
});