title: Remove class from other siblings
body: <p>I have a structure like</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="open active"&gt;
      &lt;a&gt;&lt;/a&gt;
      &lt;ul class="submenu nav-show" style="display:block"&gt;&lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=""&gt;
      &lt;a&gt;&lt;/a&gt;
      &lt;ul&gt;&lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>when user click on second <code>li</code> then from first <code>li's ul</code> which containing <code>nav-show</code> will be <code>nav-hide</code> and style will be <code>display:hide</code> </p>
  
  <p>Till now I have tried</p>
  
  <pre><code>var open = document.querySelectorAll(".open");
  var a=$(open).closest("li").addClass('active').siblings().removeClass('active');
  $(a).siblings().closest("ul").removeClass('nav-hide').addClass('nav-show');
  </code></pre>
  
  <p>But its not working
  also tried </p>
  
  <pre><code>var open = document.querySelectorAll(".open");
  $(open).closest("li").addClass('active').siblings().removeClass('active');
  $(open).not(":has(.active)").collapse('hide');
  </code></pre>
  
  <p>but not giving proper output 
  plz help me</p>