Add Active To Collapsible Nav-link

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

Solution 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;
}

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

Solution 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');
  }
});