Difficulty removing class on .click() function

Question

Situation: I have created a nav with a click function that allows the sub nav to .slideToggle(); when user clicks the nav link.

Issue: The active class is added to the nav link when clicked but does not remove itself when the user clicks on a sibling nav link. It continues to add active classes one by one.

Questions: How can I properly write the function to add the class to the clicked link, then remove the class when a sibling link is clicked while adding the class to the now selected link, etc...

JS Code:

// Pillar side navigation function
$('.side-nav-link').click(function(e) {
  var $pillarNav = $('.pillar-subnav')

  $(this).removeClass('side-nav-active');

  if ($pillarNav.is(':visible')) {
    $pillarNav.slideUp();
    $(this).next('ul').stop().slideToggle();
  } else {
    $(this).next('ul').stop().slideToggle();
  }

  $(this).addClass('side-nav-active');

  e.preventDefault()
});

Here is the working JS Fiddle

adeneo · Accepted Answer · 2017-04-28 18:37:00Z

Just remove the class from all elements that have that class, then add it to the current, here's a cleaner way to do it

$('.side-nav-link').click(function(e) {
  e.preventDefault()

  var $pillarNav = $('.pillar-subnav')
  var $subnav = $(this).next('.pillar-subnav').stop().slideToggle();
  var $this = $(this).toggleClass('side-nav-active');

  $('.side-nav-link').not($this).removeClass('side-nav-active');
  $pillarNav.not($subnav).slideUp();
});

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav>li {
  position: relative;
  display: block;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.pillar-links>li {
  background-color: #f1f1f1;
  border: solid 1px #e3e3e3;
  padding: 5px;
}

.pillar-nav>.side-nav-item>.side-nav-link,
.nav>.side-nav-item>.nav-link {
  color: #555555;
  padding: 15px;
}

.pillar-subnav {
  display: none;
  list-style: none;
  padding: 0;
  background-color: #f1f1f1;
  border-top: 1px solid #d0d0d0;
}

.pillar-subnav li {
  padding: 5px 0;
  border-bottom: 1px solid #d0d0d0;
}

.pillar-subnav li a {
  color: #555555;
  padding: 5px 30px;
  display: inline-block;
}

.pillar-subnav li a:hover {
  text-decoration: none;
  color: #006a65;
  font-weight: bold;
}

.side-heading {
  padding: 5px 15px;
  background-color: #d8d8d8;
  border-bottom: 2px solid #9dc4c3;
  border-radius: 5px 5px 0 0;
}

.side-nav {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 20px #6e9da3;
  width: 220px;
  margin: 20px auto;
}

.side-nav-item {
  position: relative;
  border-bottom: 1px solid #d0d0d0;
}

.side-nav-item::after {
  content: "4";
  font-family: "webdings", sans-serif;
  position: absolute;
  right: 5px;
  top: 25px;
  bottom: 25px;
}

.side-nav-item:last-child::after {
  top: 17px;
}

.side-nav-item:last-child,
.pillar-subnav li:last-child {
  border-bottom: none;
}

.side-nav-item .side-nav-link:hover,
.side-nav-active,
.side-nav-item .nav-link:hover,
.pillar-links>li:hover {
  background-color: #e9e9e9;
  border-left: 4px solid #006a65;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="side-nav">
  <nav>
    <div class="side-heading">
      <h4>Communication Platform</h4>
    </div>
    <ul class="nav pillar-nav">
      <li class="side-nav-item">
        <a class="side-nav-link" href="#">CSL Behring Transplant Franchise</a>
        <ul class="pillar-subnav">
          <li><a href="#">Transplant Franchise Overview</a></li>
          <li><a href="#">Solid Organ Transplantation Overview</a></li>
        </ul>
      </li>
      <li class="side-nav-item">
        <a class="side-nav-link" href="#">Organ Availability and Patient/Donor Matching</a>
        <ul class="pillar-subnav">
          <li><a href="#">Organ Donation</a></li>
          <li><a href="#">Matching Organs</a></li>
          <li><a href="#">Desensitization</a></li>
        </ul>
      </li>
      <li class="side-nav-item">
        <a class="side-nav-link" href="#">Organ Viability and Donor Management</a>
        <ul class="pillar-subnav">
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
        </ul>
      </li>
      <li class="side-nav-item">
        <a class="side-nav-link" href="#">Ischemia-Reperfusion Injury (IRI)</a>
        <ul class="pillar-subnav">
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
        </ul>
      </li>
      <li class="side-nav-item">
        <a class="side-nav-link" href="#">Transplant Rejection</a>
        <ul class="pillar-subnav">
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
          <li><a href="#">Pillar</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</aside>

@adeneo That's interesting. I thought you had to call the element with the class to remove the class but in that line you call the class to remove it, if that makes sense. In the past I have called the li and removed the class but it works as expected.

Mohamed-Yousef · Accepted Answer · 2017-04-28 18:30:22Z

2

you can use not() and toggleClass()

$('.side-nav-link').not($(this)).removeClass('side-nav-active');
$(this).toggleClass('side-nav-active');

Demo

answered Apr 28, 2017 at 18:30

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Comments

Nate Beers · Accepted Answer · 2017-04-28 18:31:27Z

0

Remove active from everything first, then apply to $(this) only

// Pillar side navigation function
$('.side-nav-link').click(function(e) {
  e.preventDefault()
  var $pillarNav = $('.pillar-subnav')
  $('.side-nav-link').removeClass('side-nav-active');

  $(this).addClass('side-nav-active');

  if ($pillarNav.is(':visible')) {
    $pillarNav.slideUp();
    $(this).next('ul').stop().slideToggle();
  } else {
    $(this).next('ul').stop().slideToggle();
  }
});

answered Apr 28, 2017 at 18:31

Nate Beers

1,4252 gold badges14 silver badges24 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2017-04-28 18:34:26Z

0

Here's a nice and readable one :)

jsFiddle demo

// Pillar side navigation function
var $allLinks = $('.side-nav-link');
var $allSubnav = $(".pillar-subnav");

$allLinks.click(function(e) {

  e.preventDefault()

  // LINKS
  $allLinks.not(this).removeClass("side-nav-active"); // All
  $(this).toggleClass("side-nav-active");             // Clicked link

  // SUBNAVS
  var $mySubnav = $(this).closest("li").find(".pillar-subnav");
  $allSubnav.not($mySubnav).stop().slideUp();         // All
  $mySubnav.stop().slideToggle();                     // Related subnav

});

answered Apr 28, 2017 at 18:34

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

Andréle · Accepted Answer · 2017-04-28 18:35:54Z

0

Keep it simple, toggle class for $(this) and remove the siblings:

$(this).toggleClass('side-nav-active').siblings().removeClass('side-nav-active');

answered Apr 28, 2017 at 18:35

Andréle

3363 silver badges10 bronze badges

Collectives™ on Stack Overflow

Difficulty removing class on .click() function

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related