title: Hiding/unhiding list elements with jQuery
body: <p>I'm attempting to create a "filterable" list of items.  The user should be able to click on a list element (the parent), which would hide all other parent elements and show the "children".</p>
  
  <p>An example of the html is:</p>
  
  <pre><code>&lt;ul class='parent_list'&gt;
      &lt;li&gt;Parent 1&lt;/li&gt;
          &lt;ul class='child_list'&gt;
              &lt;li&gt;Child 1&lt;/li&gt;
              &lt;li&gt;Child 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Parent 2&lt;/li&gt;
          &lt;ul class='child_list hidden'&gt;
              &lt;li&gt;Child 1&lt;/li&gt;
              &lt;li&gt;Child 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My jQuery code is:</p>
  
  <pre><code>$('.parent_list li').click(function(){
      $(this).siblings().addClass('hidden');
      $(this).children().removeClass('hidden');
  });
  </code></pre>
  
  <p>Of course, you can probably tell by the javascript that I don't have too much experience with things like this.  I've tried searching for a bunch of different examples on Google and haven't been able to get anything to work as of yet.  Any tips?</p>
  
  <p>Thanks!</p>