Collapsiable menu close all except target, when it open in jQuery

Question

This is the HTML structure of my sidebar menu. Submenu is a collapsible menu.

<ul class="block-navigation" id="sidebar-navigation">
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
      School Affairs
      <em></em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>School Affairs</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>National Schools</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Teacher Transfers</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    ----- 
    -----
  </li>
</ul>

My question is, I need to close all submenus except target one. Submenu triggering by clicking on the <em> element inside parent <a>

This is how I tried it in jQuery

$("#sidebar-navigation li.navigation-submenu > a > em").on('click', function(e) {
   e.preventDefault();   

  let $el = $(this).parent().parent('li'); 
  $($el).not($el).removeClass("active");
  $($el).not($el).find(".navigation-submenu").slideUp();
  
  $(this).parent().parent('li').toggleClass("active");
  $(this).parent().parent('li').find(".navigation-submenu").slideToggle();

});

But this only work to open submenu.. Hope some body may help me out.

Answer 1

$($el) will select only one element $el it self. See the selected elements length in my snippet console.

You can use siblings().

$($el).siblings()

Or class selector

$(".navigation-submenu").not($el)

$("#sidebar-navigation li.navigation-submenu > a > em").on("click", function(e) {
  e.preventDefault();
  let $el = $(this).parent().parent("li");
  console.log(`$($el).not($el).length=${$($el).not($el).length}\n$($el).siblings().length=${$($el).siblings().length}`);
  $($el).siblings().removeClass("active");
  $($el).siblings().find(".navigation-submenu").slideUp();

  $el.toggleClass("active");
  $el.find(".navigation-submenu").slideToggle();
});

.navigation-submenu.active a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="block-navigation" id="sidebar-navigation">
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
                School Affairs
                <em>toggle</em>
            </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>School Affairs</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>National Schools</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Teacher Transfers</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
                School Affairs
                <em>toggle</em>
            </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>School Affairs</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>National Schools</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Teacher Transfers</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Answer 2

Consider the following.

$(function() {
  $("#sidebar-navigation li.navigation-submenu > a > em").on('click', function(e) {
    e.preventDefault();

    var $self = $(this);
    var $active = $("li.navigation-submenu.active");
    $active.find("ul").slideUp("fast", function() {
      $(this).parent().removeClass("active");
      $self.closest("li").find("ul").slideDown("fast", function() {
        $(this).parent().addClass("active");
      });
    });

  });
});

.navigation-submenu .block-navigation-submenu {
  display: none;
}

.navigation-submenu.active .block-navigation-submenu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="block-navigation" id="sidebar-navigation">
  <li class="navigation-item has-child navigation-submenu active">
    <a class="open-submenu" href="#">
      School Affairs
      <em>[O]</em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>School Affairs</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>National Schools</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Teacher Transfers</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
      Menu 2
      <em>[O]</em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 1</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 2</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 3</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
      Menu 3
      <em>[O]</em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 1</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 2</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 3</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

This closes the active list, removes the class, opens the target, and adds the class to it.