My clickable jQuery drop-down menu does not work

Question

I've made a clickable drop-down menu using JQuery.

The drop-down menu must work like:
1) 'a' dropdown toggle Click, 'a' dropdown menu visible
2) not('a' dropdown toggle and 'a' dropdown menu) === dropdownMenu is hide
3) setTimeOut is need(i'm really code is animation css)

I want multiple drop-down menus.

a, b, c, d...and "Z"

but my drop-down menu gives this problem:
1) a drop-down toggle click, after b drop-down toggle click === a drop-down is not hide
2) but this code not include document.closeset(I want to include dropdownToggle.click(function ()<<<

How can I go about to clear this issue? Any help would be highly appreciated.

 $(function(){ body = $('body'); /* dropdown */ var dropdown = $('.dropdown'), dropdownToggle = dropdown.find('.toggle'), dropdownMenu = dropdown.find('.menu'), checkDropdownOpen = 'close'; dropdownToggle.click(function() { $(this).each(function() { // setInitial var thisDropdown = $(this).parent('.dropdown'), thisDropdownToggle = $(this), thisDropdownMenu = $(this).next('.menu'); // checkDropdownMenu = open if (!thisDropdownMenu.hasClass('open') && (thisDropdownMenu.attr('aria-hidden') === 'true' || thisDropdownMenu.attr('aria-hidden') === undefined)) { // visible setTimeout(function() { checkDropdownOpen = 'open'; thisDropdownMenu.addClass('open'); }, 10); // attr change setTimeout(function() { thisDropdownMenu.attr('aria-hidden', 'false'); }, 218); } else if (thisDropdownMenu.hasClass('open') && thisDropdownMenu.attr('aria-hidden') === 'false') { // visible setTimeout(function() { checkDropdownOpen = 'close'; thisDropdownMenu.removeClass('open'); }, 10); // attr change setTimeout(function() { thisDropdownMenu.attr('aria-hidden', 'true'); }, 218); } }) }); /* dropdownClose() */ function dropdownClose() { // toggle dropdownMenu.removeClass('open'); // hidden, attr change setTimeout(function() { body.removeClass('account-open'); dropdownMenu.attr('aria-hidden', 'true'); }, 218); } /* document click */ $(document).click(function(e) { // dropdown if (!$(e.target).closest(dropdown).length) { dropdownClose(); } }); }); 

 .dropdown .menu { display: none; } .dropdown .menu.open { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> <button class="toggle">button</button> <div class="menu">article</div> </div> <div class="dropdown"> <button class="toggle">button</button> <div class="menu">article</div> </div> 

Answer 1

Using the existing code, you could add this line:

dropdownClose();

between these lines:

dropdownToggle.click(function() {
$(this).each(function() { 

This will close the entire menu before opening the target sibling menu.

Another way to do the same thing:

$( document ).ready(function() {
  $('.toggle').on('click', function() {
    $('.menu').hide(250);
     $(this).next().show(500);
  });
});