Toggle Nav Menu on and off and close other nav menus on click

Question

I have tried several different venues and ultimately came back to this which allows me to toggle them on and off individually but also I can open one dropdown and then also open another dropdown without the first closing. I want to be able to toggle them on and off as well as close all others when one is toggled on.

$('.list > li a').click(function () {
    $(this).parent().find('ul').toggle();
});

Answer 1

Try this. Basically hide all toggles first and then show which is clicked. Note. I have removed the a tag and took the click on to the li element itself.

$('.list > li').click(function () {
    $('.list  li').hide();
    $(this).find('ul').toggle();
});

Suggestion: Please share your html and jsfiddle link to get a better answer.

Answer 2

you can hide all other elements first and then toggle current element.

$('.list > li a').click(function () {
    $('.list > li a').not(this).parent().find('ul').hide();
    $(this).parent().find('ul').toggle();
});

Answer 3

I want to close the first nav dropdown when we open any other drop down currently I am using the elementor navbar. Check here https://kctherapy.com/our-team/ .