HTML:\[code\]<ul> <li class="listExpandTrigger"><h3>2010 - present</h3></li> <li class="listCollapseTrigger"><h3>2010 - present</h3></li> <li> <ul class="volumeList"> <li class="listExpandTrigger"><h3>Volume 13</h3></li> <li class="listCollapseTrigger"><h3>Volume 13</h3></li> <li> <ul class="issueList"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </ul> </li></ul>\[/code\]CSS:\[code\].listCollapseTrigger, .volumeList, .issueList{ display: none;}\[/code\]JS:\[code\]$( 'body' ).on( 'click', '.listExpandTrigger', function(){ $( this ).parent().find( 'ul' ).css( 'display', 'block' ); $( this ).parent().find('.listExpandTrigger').css('display', 'none'); $( this ).parent().find('.listCollapseTrigger').css('display', 'block');});\[/code\]I realize there are more steps to complete with the Javascripts, but I'm having issues right out of the gate. I need to exclude children classes and ul's or only affect the first instance of the thing it's told to find(). Right now the function affects everything inside the parent of the trigger, which makes sense. I'm just not sure how to fix it. Thanks!