title: If one UL already is opened, hide the other one, how?
body: <p>So, I'm creating a submenu by myself by following the jQuery codex only and I got stuck. Everything else is perfect, though.</p>
  
  <p>I have an HTML structure like the following:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#"&gt;smth&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;smth sub&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;smth&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;smth sub 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>And let's say that the first SMTH is opened. Now, when I click on the second SMTH it will just appear on top of the other one.</p>
  
  <p>My jQuery code is as follows.</p>
  
  <pre><code>$(document).ready(function() {
      /*
      * header navigation
      */
  
      // hide sub UL's
      $('ul.sub').hide();
  
      $('#header .left li.m:first a, #header .right li.m:first a').css('borderLeft', 'none');
      $('#header .left li.m:last a, #header .right li.m:last a').css('borderRight', 'none');
  
      // Add class closed, because it's nessesery.
      $('#header .left li ul').addClass('closed');
  
      // If LI element is clicked, open or close sub UL?
      $('#header .left li').click(function(event)
      {
          // If sub UL is closed, we need to open it.
          if( $(this).find('ul').hasClass('closed') )
          {
              $(this).find('ul').removeClass('closed');
              $(this).find('ul').addClass('opened');
              $(this).find('ul').fadeIn('100');
          }
          // If sub UL is opened, we need to close it.
          else
          {
              $(this).find('ul').removeClass('opened');
              $(this).find('ul').addClass('closed');
              $(this).find('ul').fadeOut('100');
          }
      });
  });
  </code></pre>