HTML:
<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>
CSS:
.listCollapseTrigger, .volumeList, .issueList{
display: none;
}
JS:
$( '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');
});
Upon attempting to implement this Javascript function, I encountered some challenges right from the start. Specifically, I need the function to exclude child classes and ul elements or only target the first instance of the specified element. Currently, the function affects all elements inside the parent of the trigger, which is not the intended behavior. I'm seeking guidance on how to resolve this issue. Thank you!