add active to collapsible nav-link

Question

The code was initially designed with data-toggle="tab" but I replaced it to collapse. It worked as I wanted. I need to to include active to nav-link class for css redesign purposes. I tried couple of jQuery but none seem to work.

 $('.nav .nav-item .nav-link').click(function(){ $('.nav .nav-item .nav-link').removeClass('active'); $(this).addClass('active'); }) 

 <div id="accordion"> <ul class="nav nav-pills nav-justified" style="width: 100%;margin: auto;padding: 0px;" role="tablist"> <li class="nav-item"> <a class="nav-link collapsed" href="#dashboard-1" role="tab" data-toggle="collapse"> <i class="material-icons">dashboard</i> Dashboard </a></li> <li class="nav-item"> <a class="nav-link collapsed" href="#schedule-1" role="tab" data-toggle="collapse"> <i class="material-icons">schedule</i> Schedule </a></li> <li class="nav-item"> <a class="nav-link collapsed" href="#tasks-1" role="tab" data-toggle="collapse"> <i class="material-icons">list</i> List </a></li> </ul> <div class="tab-content tab-space"> <div class="collapse" data-parent="#accordion" id="dashboard-1">Collaboratively</div> <div class="collapse" data-parent="#accordion" id="schedule-1"> Efficiently </div> <div class="collapse" data-parent="#accordion" id="tasks-1"> Completely </div> </div> </div> 

Answer 1

I have create Fiddle for you. Its work perfect as per your question.

  $('li').click(function() { $('li.active').removeClass('active'); $(this).addClass('active'); }) 

 .active{ background-color:yellow; font-size:25px; font-weight:bold; } 

 <div id="accordion"> <ul class="nav nav-pills nav-justified" style="width: 100%;margin: auto;padding: 0px;" role="tablist"> <li class="nav-item"> <a class="nav-link collapsed" href="#dashboard-1" role="tab" data-toggle="collapse"> <i class="material-icons">dashboard</i> Dashboard </a></li> <li class="nav-item"> <a class="nav-link collapsed" href="#schedule-1" role="tab" data-toggle="collapse"> <i class="material-icons">schedule</i> Schedule </a></li> <li class="nav-item"> <a class="nav-link collapsed" href="#tasks-1" role="tab" data-toggle="collapse"> <i class="material-icons">list</i> List </a></li> </ul> <div class="tab-content tab-space"> <div class="collapse" data-parent="#accordion" id="dashboard-1">Collaboratively</div> <div class="collapse" data-parent="#accordion" id="schedule-1"> Efficiently </div> <div class="collapse" data-parent="#accordion" id="tasks-1"> Completely </div> </div> </div> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> 

Answer 2

no change to HTML code. the java script basically check if clicked nav pill has an active state, it will remove it otherwise it will assign active class and remove active class in others.

  $('a').click(function() { if ( $(this).hasClass('active') ) { $(this).removeClass('active'); } else { $('a.active').removeClass('active'); $(this).addClass('active'); } });