I feel like this is a simple problem and I searched quite a bit but I cannot come up with a good answer. I have a bunch of nested ULs that I have appended to a div. I want to be able to collapse the UL I click on. The problem is that when you click one UL inside of another UL you are actually clicking both. So if I click the lowest tier to collapse and say something like $(this).css( 'height', '5px') The highest level UL also gets a height of 5px. Hopefully the code will make my question more clear. \[code\]<ul class=t0> <li class='item'>Top Item 1</li> <li class='item'>Top Item 2</li> <li class='item'>Top Item 3 is a list</li> <ul class=t1> <ul class=t2> <li class='item'>some <span class='val'>Thing</span></li> <li class='item'>something <span class='val'>else</span></li> </ul> <ul class=t2> <li class='item'>method : <span class='val'>GET</span></li> <li class='item'>uri : <span class='val'>/status</span></li> </ul> </ul><li class='item'>Top Item 3 is a list</li></ul>\[/code\]So if you click the UL class t2 only that t2 collapses, but if you click on t1 then both the t2s collapse. I know how to change the css and everything I am just having trouble with selecting only the ul clicked. I think I can use .find or .closest I am just not sure exactly how to do it. Thanks in advance for the help.