How to get the first name of each list?

Question

Sorry if the title isn't clear enough, I have five <li>'s in each <li> I have <a> and a <div> and in each <div> I have a <ul>with a class of "config". Then in that I have two <li>.

I use jQuery to hide the <ul> 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 <div> or <ul> should appear, not all of them. How can I do this?

So far I have:

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

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

Answer 1

With not sure of what the HTML really is, try

$(document).ready(function(){
  $("ul.config").hide();
  $("li:nth-child(1) a").click(function(){
    $(this).parent().find('ul.config').slideToggle(300);
  });
});​

Answer 2

put a class/id to your top-most ul (before 5 top li), e.g: id="topmenu"

$(document).ready(function(){
  $("ul.config").hide();
  $("#topmenu li a").click(function(){
    $(this).parent().find('ul.config').slideToggle(300);
  });
});​