Question

So I would like to build a unsorted list and and another unsorted list within it so there is a basic menu functionality.

I basically need to know how to have Jquery access the elements so when a main level item is clicked, its children show.

So for example:

<ul class="category-links">
<li>
        <span>Category 1</span>             
        <ul class="sub-category-links">
           <li>Sub-category 1</li>
           <li>Sub-category 2</li>
           <li>Sub-category 3</li>
        </ul>
    </li>   
</ul>

I might have several of these. Essentially I set the subcategories to display:none and I want Jquery to allow for when I click on the “category-links”, only its children are displayed.

Thanks!

Answer 1

You can do something like this:

$('.category-links li').click(function(){
  $(this).find('.sub-category-links').show();
});