Hiding/unhiding list elements with jQuery
<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>
