Hi. I want to collapse my navigation. But I can't select the nested <ul> inside a <li> The markup: <ul id="navigation"> <li>Fruits <ul> <li>Apples</li> <li>Bananas</li> <li>Strawberries</li> </ul> </li> <li>Vegetables <ul> <li>Tomatoes</li> <li>Peas</li> </ul> </li>
This is what I tried to do: $('#navigation li').click(function() { $(this).next().slideToggle("fast"); }); But this code doesn't collapse the nested ul but the next li. When I click Fruits it'll toggle Vegetables. How can I select just the ul inside the li? When I click Fruits it should toggle the ul with Apples, Bananas ... This one won't work either: $('#navigation li').click(function() { $(this ' ul').slideToggle("fast"); }); or this: $('#navigation li').click(function() { $(this).child().slideToggle("fast"); }); Hope somebody can help. Thanks!