How to get the first name of each list?
<p>Sorry if the title isn't clear enough, I have five <code>&lt;li&gt;'s</code> in each <code>&lt;li&gt;</code> I have <code>&lt;a&gt;</code> and a <code>&lt;div&gt;</code> and in each <code>&lt;div&gt;</code> I have a <code>&lt;ul&gt;</code>with a class of "config". Then in that I have two <code>&lt;li&gt;</code>.</p>

<p>I use jQuery to hide the <code>&lt;ul&gt;</code> with the class of config and then use slideToggle to show/hide them. The problem is, It shows all of them. I want to just click one link and the appropriate <code>&lt;div&gt;</code> or <code>&lt;ul&gt;</code> should appear, not all of them. How can I do this? </p>

<p>So far I have:</p>

<pre><code>$(document).ready(function(){
  $("ul.config").hide();
  $("li:nth-child(1) a").click(function(){
    $("li ul.config:first").slideToggle(300);
  });
});​
</code></pre>

<p>But that only shows the very first list. How can I show each one when it's clicked?</p>
