title: slideDown one sub menu and slideUp other sub menus
body: <p>I have:
  10 main-menus (two designs namely .main-menu1 and .main-menu2)
  Every main-menu has sub-menu which slides down on click</p>
  <p>Now I want previously opened sub-menu to close when I click on other main-menu. Another tricky thing is I have two designs of main-menu so clicking on main-menu2 should also close sub-menu of main-menu1. I have this so far:</p>
  <pre><code>        $(document).ready(function(){
            //jquery for toggle sub menus
            $('.main-menu1','main-menu2').click(function(){                
              var isHidden = $('.sub-menu').is(&quot;:hidden&quot;);
              var isVisible = $('.sub-menu').is(&quot;:visible&quot;);                  
              if (isHidden) {
                  $(this).next('.sub-menu').slideDown();
              } else {
                  $(this).next('.sub-menu').slideUp();
              }
            });
  </code></pre>