title: Hide current submenu when other menu item is clicked
body: <p>I have created a header where I am having submenus and all. If I click on a menu where I have submenus for those menus it is working fine. But the problem is when I click on another menu which has submenus the previous one which we have clicked is not getting hidden. Both the menus are displaying which is active and inactive mode. Here is the code which I have written:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Javascript Code:
  $('.main-menu li a + ul').prev('a').append('&lt;span class="caret"&gt;&lt;/span&gt;');
  $('.main-menu ul li a').click(function (e) {
    if ($(this).next().hasClass('sub-menu')) {
      e.preventDefault();
      // $('.sub-menu').slideUp(); // &lt;--- This is the culprit
      $('.main-menu ul li a').removeClass('active');
      if ($(this).next('.sub-menu').is(':visible')) {
        $(this).removeClass('active');
        $(this).next('.sub-menu').slideUp();
      } else {
        $(this).addClass('active');
        $(this).next('.sub-menu').slideToggle();
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*CSS:*/
  .main-menu {
    width: 100%;
    position: relative;
  }
  
  .main-menu ul {
    list-style: none;
    font-size: 0;
    line-height: 0;
    text-align: right;
  }
  
  .main-menu ul li {
    display: inline-block;
    vertical-align: top;
  }
  
  .main-menu ul li a {
    padding: 42px 25px;
    color: #898E94;
    display: block;
    font-size: 16px;
    line-height: 18px;
    font-family: 'Roboto_reg';
  }
  
  .side-nav {
    width: 340px;
    right: 0;
    position: absolute;
    background-color: #222222;
    top: 100px;
    z-index: 10;
    display: none;
    height: auto;
  }
  
  .side-nav ul li li a {
    padding-left: 70px;
    font-family: 'source_sans_proregular';
  }
  
  .side-nav ul li a:hover {
    background-color: #ff3c1f;
    cursor: pointer;
  }
  
  .side-nav ul li a {
    color: white;
    font-size: 16px;
    line-height: 24px;
    padding: 15px 50px;
    display: block;
    position: relative;
    border-top: 1px solid transparent;
  }
  
  .side-nav.active {
    display: block;
  }
  
  .side-nav ul li ul {
    border-bottom: 1px solid rgba(255, 60, 31, 0.3);
    padding-bottom: 30px;
  }
  
  .side-nav ul li a.active {
    border-color: rgba(255, 60, 31, 0.3);
  }
  
  .sub-menu {
    display: none;
  }
  
  .side-nav ul li {
    position: relative;
  }
  
  .caret {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 20px;
    right: 65px;
    border: 0;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  
  .sub-menu li a {
    padding: 10px 25px !important;
    line-height: 0px !important;
    margin-top: -22px;
  }
  
  .sub-menu li a {
    margin-left: -237px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- HTML: --&gt;
  &lt;div class="main-menu"&gt;
     &lt;ul id="menu-main-menu" class="menu"&gt;
        &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/barcoun/"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/barcoun/about-us/"&gt;&lt;span&gt;About Us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li  class="menu-item"&gt;
           &lt;a href="#" &gt;&lt;span&gt;Menu3&lt;/span&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
           &lt;ul class="sub-menu"&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/sumenu1/" &gt;&lt;span&gt;submenu1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/submenu2"&gt;&lt;span&gt;submenu2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/sumenu5/" &gt;&lt;span&gt;submenu5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/sumenu6/" &gt;&lt;span &gt;submenu6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/sumenu7/" &gt;&lt;span&gt;submenu7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="menu-item"&gt;
           &lt;a href="#"&gt;&lt;span&gt;Other Links&lt;/span&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
           &lt;ul class="sub-menu"&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/sumenu8/" &gt;&lt;span&gt;Submenu8&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/sumenu9/" &gt;&lt;span&gt;Submenu9&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/sumenu10/" &gt;&lt;span&gt;Submenu10&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/bar/sumenu11/" &gt;&lt;span&gt;Submenu11&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li  class="menu-item"&gt;&lt;a href="http://localhost/barcoun/contact-us/"&gt;&lt;span&gt;Contact Us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is not displaying the arrow icon as well it is working fine in Mobile devices but getting problem in desktops.</p>