How to affect specific element with jQuery toggleClass

I’m doing a side-navbar, it has multiple link containers that are suppoused to be hidden until a click event happens on the link-title above it. The code is something like this:

<div class="link-section">
     <small class="link-section-title">Utilities</small>
     <div class="link" data-type="accounts">
       <span class="iconify" data-icon="material-symbols:inventory-2-outline-rounded" style="color: #ececec;" data-width="20" data-height="20"></span>
       <p>Accounts</p>
     </div>
     <div class="links">
       <p>manage</p>
       <p>example</p>
       <p>example</p>
       <p>example</p>
       <p>example</p>
     </div>
</div>

When I click on the element link-section-title, I’m using jQuery to toggle a class called ‘open’ that sets a max-height to the div.links. The problem is that I have multiple link-sections and everytime I click on one link-section-title it adds the open class to every div.links in the page.

Is there some way to prevent this and only add the class to the container that is suppoused to open? Thanks.

>Solution :

Use $(this) to access the elements in the same section.

$(".link-section-title").click(function() {
    $(this).siblings(".links").toggleClass("open");
});