Drop down only one menu at a time

Question

So far I have this drop-down menu . When I click on either "Menu", "Menu1" or "Menu2", the links under it will drop down.

The problem: I need to display only one drop-down at a time, so that the user can switch between them.

I tried to apply css('overflow', 'hidden'); to the menu currently dropped down, but it won't work, since the overflow: visible !important; is applied to the .clicked class. Please help, anything will be highly appreciated!

Answer 1

Try when you click on a element remove class clicked from all elements and add class clicked to the element that is clicked

$("#product-menu>ul>li").click(function () {
    var hidden = $(this).find('.clicked');
    $("#product-menu>ul>li").removeClass('clicked');
    $(this).addClass('clicked');
    $('.productSubmenu').width(menuWidth);
});

DEMO

UPDATE

If you want also on second click menu to be closed try checking if clicked item has already class clicked :

$("#product-menu>ul>li").click(function () {
    var hidden = $(this).find('.clicked');
    if ($(this).hasClass('clicked')) {
        $(this).removeClass('clicked')
    } else {
        $("#product-menu>ul>li").removeClass('clicked');
        $(this).addClass('clicked');

    }
    $('.productSubmenu').width(menuWidth);
});

DEMO2

Answer 2

You also might want to close the links

$("#product-menu>ul>li").click(function () {
    var hidden = $(this).find('.clicked');
    $("#product-menu>ul>li").removeClass('clicked');
    $("#product-menu .productSubmenu2").hide(); // this one I added
    $(this).addClass('clicked');
    $('.productSubmenu').width(menuWidth);
});