I am working with a bootstrap navigation bar that includes an option called "Add New Candidate" as a list item. I need to update its class from "nav-item has-treeview" to "nav-item has-treeview menu-open" when the user selects it, and also change the class of the "General Information" unordered list inside the "Add New Candidate" to "nav-link active".
For possible solutions, I have referred to this article on Bootstrap CSS Active Navigation
Please find the images of the navigation bar and the expected outcome below:
Here is the code snippet:
$(document).ready(function(){
$('.nav nav-pills nav-sidebar flex-column li').click(function(e) {
var $this = $(this);
if (!$this.hasClass('nav-item has-treeview')) {
$this.addClass('nav-item has-treeview menu-open');
}
e.preventDefault();
});
$('.nav nav-pills nav-sidebar flex-column li a').click(function(e) {
var $this = $(this);
if (!$this.hasClass('nav-link')) {
$this.addClass('nav-link active');
}
e.preventDefault();
});
$('.nav nav-treeview li a').click(function(e) {
var $this = $(this);
if (!$this.hasClass('nav-link')) {
$this.addClass('nav-link active');
}
e.preventDefault();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item has-treeview">
<a href="addnewCandidate" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Add new Candidate <i class="right fas fa-angle-left"></i></p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item"">
<a href="addnewCandidate" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>General Information</p>
</a>
</li>
<li class="nav-item" >
<a href="educationInfo" class="nav-link">
<i class="far fa-circle nav-icon" id="education" ></i>
<p>Education</p>
</a>
</li>
<li class="nav-item">
<a href="trainingInfo" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Training</p>
</a>
</li>
<li class="nav-item">
<a href="workExperienceInfo" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>WorkExperience</p>
</a>
</li>
<li class="nav-item">
<a href="languageInfo" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Language</p>
</a>
</li>
</ul>
</li>
</ul>