title: How to close sub menu items using jquery this
body: <p>I have created a menu with three levels and would like any open sub menu's to close when you click on a new sub menu header. I have managed to get it working for the first sub menu's but not for second sub menu's, when I click on the second sub menu it closes the because I have tried to reuse the same class for both levels is there a way round this? Also since I have removed the class in the function it has stopped closing sub menu's when you click on their header, is there a way to accomplish this as well:</p>
  
  <p>Html:</p>
  
  <pre><code> &lt;nav id="main-nav" role="navigation"&gt;
          &lt;div class="block"&gt;
              &lt;h2 class="block-title"&gt;Main menu&lt;/h2&gt;
              &lt;ul&gt;
                  &lt;li class="is-active"&gt;
                      &lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;&lt;!--
               --&gt;&lt;li&gt;
                      &lt;a class="toggle-sub-nav" href="#"&gt;Link &gt;&lt;/a&gt;
                        &lt;ul class="sub-nav"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub link&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub link&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub link&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                  &lt;/li&gt;&lt;!--
               --&gt;&lt;li&gt;
                      &lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;&lt;!--
               --&gt;&lt;li&gt;
                      &lt;a class="toggle-sub-nav" href="#"&gt;Link &gt;&lt;/a&gt;
                      &lt;ul class="sub-nav"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub link&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt; &lt;a class="toggle-sub-nav" href="#"&gt;Sub Link &gt;&lt;/a&gt;
                      &lt;ul class="sub-nav"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub link&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub link&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub link&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub link&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                  &lt;/li&gt;&lt;!--
               --&gt;&lt;li&gt;
                      &lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
             &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS for sub menus: </p>
  
  <pre><code>.sub-nav { 
  
       height: 0px;
      -webkit-transition: all 600ms cubic-bezier(.42,0,.58,1);
      -moz-transition: all 600ms cubic-bezier(.42,0,.58,1);
      -o-transition: all 600ms cubic-bezier(.42,0,.58,1);
      -ms-transition: all 600ms cubic-bezier(.42,0,.58,1);
      transition: all 600ms cubic-bezier(.42,0,.58,1);
      overflow:hidden;
  
    }
  
  
    .sub-nav-open {
  
      height: auto;
      max-height: 500px;
  
    }
  
  .sub-nav li { background-color: #666; } 
  </code></pre>
  
  <p>Jquery: </p>
  
  <pre><code>$(function() {
      $(".toggle-sub-nav").click(function() {
          $('.sub-nav').removeClass('sub-nav-open');
              $(this).next(".sub-nav").toggleClass('sub-nav-open');
              return false;
      });
  }); 
  </code></pre>