title: Onclick show submenu but hide other submenu(s)
body: <p>I am using jQuery UI menu widget to have  header navigation on my pages</p>
  
  <p>here is a mock up <a href="http://jsfiddle.net/ctL6T/1/" rel="nofollow">http://jsfiddle.net/ctL6T/1/</a></p>
  
  <p>My issue is i want to close any other shown submenus if another main menu is clicked, you can see in my fiddle if you click one main stub, the submenu stays open if you click another main stub</p>
  
  <p>i thought by using an $.each on the click event, i could by using the same code that toggles iterate through the elements and flip them back and forth, but this opens the opposite menu</p>
  
  <pre><code>        $('.has-sub').on('click', function(){
              $('#mainmenu li').each(function () {
                  $(".submenu" ).toggle();
              });
              $(this).toggleClass('ui-state-active').children('span').toggleClass('ui-icon-triangle-1-s ui-icon-triangle-1-n');
              return false;
           });
  </code></pre>
  
  <p>and this is just a mess</p>
  
  <pre><code> $('.has-sub').on('click', function(){
  $('#mainmenu li').each(function () {
    $(".submenu" ).toggle();
    $(this).toggleClass('ui-state-active').children('span').toggleClass('ui-icon-triangle-1-s ui-icon-triangle-1-n');
  });
  return false;
   });
  </code></pre>
  
  <p>as always any help is appreciated</p>
  
  <p>*due to flashing of unstyled content, i decided to have the main menu as static html using some jquery ui theme classes, it should not effect the functionality of what im asking</p>