title: Hide and show lists and sublists
body: <p>First of all, I have a HTML document which contains lists like this :</p>
  
  <pre><code>&lt;ul class="item"&gt;
      &lt;li&gt; Item 1
          &lt;ul class="subitem"&gt;
              &lt;li&gt;Subitem1&lt;/li&gt;
              &lt;li&gt;Subitem2&lt;/li&gt;
              &lt;li&gt;Subitem3&lt;/li&gt;
              &lt;li&gt;Subitem4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt; Item 2 
          &lt;ul class="subitem"&gt;
              &lt;li&gt;Subitem1&lt;/li&gt;
              &lt;li&gt;Subitem2&lt;/li&gt;
              &lt;li&gt;Subitem3&lt;/li&gt;
              &lt;li&gt;Subitem4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt; 
      &lt;li&gt; Item 3 
          &lt;ul class="subitem"&gt;
              &lt;li&gt;Subitem1&lt;/li&gt;
              &lt;li&gt;Subitem2&lt;/li&gt;
              &lt;li&gt;Subitem3&lt;/li&gt;
              &lt;li&gt;Subitem4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I would like to write some <code>Javascript</code> code that when I click on a item from the list item, it shows its sub-items.  If I click on another item from the item list, all the displayed subitems should be hidden and only the one I have pressed to be displayed.</p>
  
  <p>So far I have this:</p>
  
  <pre><code>$(document).ready(function(){
      $('.subitem').each(function()
      {
          $(this).hide();
      }
      $('.item').live("click",function(){
          $(this).next(".subitem").show();
      });
  });
  </code></pre>
  
  <p>but it does not even display the hidden subitem.  Could you help me, please?</p>