How can I hide a ul inside li?

Question

Please tell me how can I hide ul child element inside each li, by clicking li link. I mean if someone clicks Alink, A1 and A2 hides.

This is my HTML code :

[Code missing]

And here is the jQuery code, but it doesn't work :(

$(document).ready(function() {
  $("#ListGrayCircle li").click(function() {
    $(this).find('ul').hide();     
  });
});

Answer 1

Without the html I'll assume that the inner [ul] to be hidden is not within the [a] tag. Your code should run fine if the user clicks the [li] but if it's an [a] link within it it won't. Try:

$(document).ready(function() {
    $("#ListGrayCircle li").click(function() {
        $(this).closest('li').find('ul').hide();
    });
});