Jquery dropdown menu show/hide multiple

Question

I've been looking through a lot of questions/answers, but still couldn't solve my issue. So I have a menu with JS dropdown (on click, not hover), but if I open a dropdown and I click onto the second menu, then another dropdown will open, but the previous one will not close.

Clicking outside of the menu closes the dropdown, which is great but it's not enough, I want the first dropdown to close even when clicking on the second one!

<li><a onclick="myFunction_tools()" class="dropmenu" href="#">Tools</a></li>
<div id="myToolsDropdown" class="down">
    <div>
        Content here...
    </div>
</div>
<li><a onclick="myFunction_forum()" class="dropmenu" href="#">Forum</a></li>
<div id="myForumDropdown" class="down">
    <div>
        Content here...
    </div>
</div>

Here is the JS:

function myFunction_tools() {
    document.getElementById("myToolsDropdown").classList.toggle("show");
}

function myFunction_forum() {
    document.getElementById("myForumDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropmenu')) {

    var dropdowns = document.getElementsByClassName("down");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

$(".down").click(function(e){
  e.stopPropagation();
});

Answer 1

EDIT 2:

Here is a solution, that should work for you:

 $(document).ready(function() { $('.dropmenu').click(function(e) { e.preventDefault(); $('.down').hide(); $(e.target).next('.down').show(); }); }); 

 .down { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <li><a class="dropmenu" href="#">Tools</a> <div id="myToolsDropdown" class="down"> <div> Content here... </div> </div></li> <li><a class="dropmenu" href="#">Forum</a> <div id="myForumDropdown" class="down"> <div> Content here... </div> </div></li> 

Original:

You prevent closing of all dropdowns, when clicking on a dropdown:

if (!event.target.matches('.dropmenu'))

You have to change the condition, so it matches only the current active dropdown. Like " if the event target matches the current active dropdown, prevent action ". You could determine the current active dropdown, by checking for the open class.

EDIT: You might only need to change the condition to:

if (!event.target.matches('.dropmenu.active'))

so it closes all dropdowns on clicks, that are not on .dropmenu.active and than triggers the click on down.

Also, because you seem to be using jQuery anyway, you could optimize your code a lot by using jQuery throughout your script:

$(window).click(fucntion(event) {
    var $target = $(event.target);
    if(!$target.hasClass('show')){
        $('.down').removeClass('show');
        $target.addClass('show');
    }
});

Answer 2

Just remove the show class of the previous dropdown on your functions. For example:

function myFunction_tools() {
    document.getElementById("myToolsDropdown").classList.toggle("show");
    document.getElementById("myForumDropdown").classList.remove("show");
}