JQuery Nested list's children toggling whole list
jquery, list, nested
Solution
You need a `return false`.
What's happening is because your list is inside another list, it's triggering the click event on each. By adding the `return false`, it only fires for the first one.
Example at http://jsfiddle.net/4yyau/
Problem
I have a list that looks like this ``` <ul> <li class="expandable">Game <ul> <li>Action</li> <li>RPG</li> </ul> </li> <li class="expandable">BBS <ul> <li class="expandable">Group 1 <ul> <li>Board 1</li> <li>Board 2</li> </ul> </li> <li class="expandable">Group 2 <ul> <li>Board 1</li> </ul> </li> </ul> </li> </ul> ``` and some some JQuery code to collapse the lists. ``` $('li.expandable').click(function() { $(this).children('ul').toggle(); }); ``` Something like "Game" for instance works fine. However when I click any of the nested lists under BBS like Group 1, it causes Group 1 and 2 to collapse into BBS. Clicking BBS expands the list again and shows Group 1 collapsed. Is there a simple solution to this?