title: Hide all opened sibling elements on click
body: <p>In my menu, I want to show only <code>ul</code>-s which are active. Meaning if I click a different link, the previously active element should be hidden. In my example below, if <code>Item-1</code> is active and I click on <code>Item-2</code>, the <code>Item-1</code> should be hidden.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
  
    $('#main-menu').on('click', function (event) {
      $(event.target).parent().children('ul').toggleClass('hidden');
      $(event.target).parent().children('ul').addClass('is_open');
      $('#main-menu').toggleClass('is_closed');
  
      if ($(event.target).parent().children().length &lt;= 1) {
        $('#main-menu .is_open').toggleClass('hidden');
        $('#main-menu ul').removeClass('is_open');
        $('#main-menu').addClass('is_closed');
      }
    });
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sm ul {
    display: block;
  }
  
  .sm .hidden {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;ul id="main-menu" class="sm sm-simple"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;
      &lt;ul class="hidden"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 1-1&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 1-1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 1-1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 1-1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 1-2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 1-3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;
      &lt;ul class="hidden"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 2-1&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 2-1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 2-1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 2-1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 2-2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 2-3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;
      &lt;ul class="hidden"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3-1&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 3-1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 3-1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 3-1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3-2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3-3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>