Mobile menu accordion logic

I'm working on an accordion for a mobile menu and I'm trying to prevent having multiply sections(subnavs) open.

Here is my working js that will open and close subnav but each section in an independent manner.(where more than one subnav can be open):

Markup:

<ul class="navigation-menu">
   <li class="white-hover">
      <div class="drop">
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
      </div>
   </li>
   <li>...</li>
   <li>...</li>
</ul>

Js:

  jQuery('.white-hover').click(function(e) {
      jQuery(this).toggleClass('drop-down');
      jQuery(this).find(".drop").toggleClass('mobil-active');
 });

Here is my attempt to collapse open sections if any using .each:

Js:

  jQuery('.white-hover').click(function(e) {

     jQuery('.white-hover').find(".drop").each(function() {
        if (jQuery(this).hasClass('mobil-active'));
        {
           jQuery(this).toggleClass('mobil-active');
        }
     });

     jQuery(this).toggleClass('drop-down');
     jQuery(this).find(".drop").toggleClass('mobil-active');
  });

All I want to achieve is to only have one section open at a time. If the user was to click on a closed section it should open it and close the rest if they are to be open.