CODEWITHSUNDEEP
javascripthtmlbootstrap-4
A.K.
A.K.

Reputation: 141

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. 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>

Upvotes: 0

Views: 467

Answers (2)

A.K.
A.K.

Reputation: 141

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

Upvotes: 0

Kiran Joshi
Kiran Joshi

Reputation: 1876

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>

Upvotes: 1

Related Questions