Issue
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");
});
Answered By - Barmar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.