Select the correct span and div in jquery using classes

debugcn Published at Dev

user1689274

I am trying to create a navigation that will collapse on click. It is working, but I want to only select the set clicked.

<div class="sidenav-set">
    <a href="javascript:void(0)" onclick="toggleSet()" class="sidenav-set-link">Apply<span class="glyphicon glyphicon-chevron-down"></span></a>
    <div class="sidenav-links">
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <div class="sidenav-set">
    <a href="javascript:void(0)" onclick="toggleSet()" class="sidenav-set-link">Information <span class="glyphicon glyphicon-chevron-down"></span></a>
    <div class="sidenav-links">
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>

The jquery I have is this:

function toggleSet() {
  $(".sidenav-set-link span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up")
  $(".sidenav-links").toggle('slow')
}

This works, but it operates on all the sets. I want to click the link a the top of a set, change out the class on the up/down arrow and show/hide the set of .sidenav-links

I've tried several things that have not worked, any help would be greatly appreciated.

Thanks in advance.

Joundill

You want to use $(this) and a selector to find the elements you want to modify.

function toggleSet() {
  $(this).find("span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
  $(this).parents(".sidenav-set").find(".sidenav-links").toggle('slow');
}

Collected from the Internet

Please contact [email protected] to delete if infringement.