I’m trying to add sub-menus for bootstrap’s nav pills and collapse the "sub-menus" & add "active" class to the clicked element, it’s works fine but the Security tab’s content is disappear when you click on the security tab…
I don’t want to disappear the content, just collapse the menu and remove the "active" class from all other tabs.
The snippet is originally from here
const sec_tab = document.getElementById('security-tab')
sec_tab.addEventListener("click", () => {
var elems = document.querySelectorAll(".active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
sec_tab.classList.add("active");
}); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section class="py-5 my-5">
<div class="container">
<div class="bg-white shadow content-tab rounded-lg d-block d-sm-flex">
<div class="profile-tab-nav border-right">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="account-tab" data-toggle="pill" href="#account" role="tab" aria-controls="account" aria-selected="true">
<i class="fa fa-home text-center mr-1"></i>
Account
</a>
<a class="nav-link" id="password-tab" data-toggle="pill" href="#password" role="tab" aria-controls="password" aria-selected="false">
<i class="fa fa-key text-center mr-1"></i>
Password
</a>
<a class="nav-link" id="security-tab" data-toggle="collapse" data-target="#test" href="#security" role="tab" aria-controls="security" aria-selected="false">
<i class="fa fa-user text-center mr-1"></i>
Security
</a>
<div id="test" class="collapse">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</div>
<a class="nav-link" id="application-tab" data-toggle="pill" href="#application" role="tab" aria-controls="application" aria-selected="false">
<i class="fa fa-tv text-center mr-1"></i>
Application
</a>
<a class="nav-link" id="notification-tab" data-toggle="pill" href="#notification" role="tab" aria-controls="notification" aria-selected="false">
<i class="fa fa-bell text-center mr-1"></i>
Notification
</a>
</div>
</div>
<div class="tab-content p-4 p-md-5" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
<h3 class="mb-4">Account Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" value="Kiran">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" value="Acharya">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" value="kiranacharya287@gmail.com">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Phone number</label>
<input type="text" class="form-control" value="+91 9876543215">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Company</label>
<input type="text" class="form-control" value="Kiran Workspace">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Designation</label>
<input type="text" class="form-control" value="UI Developer">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Bio</label>
<textarea class="form-control" rows="4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero enim error similique quia numquam ullam corporis officia odio repellendus aperiam consequatur laudantium porro voluptatibus, itaque laboriosam veritatis voluptatum distinctio!</textarea>
</div>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
<div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab">
<h3 class="mb-4">Password Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Old password</label>
<input type="password" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>New password</label>
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Confirm new password</label>
<input type="password" class="form-control">
</div>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
<div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
<h3 class="mb-4">Security Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Login</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two-factor auth</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="recovery">
<label class="form-check-label" for="recovery">
Recovery
</label>
</div>
</div>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
<div class="tab-pane fade" id="application" role="tabpanel" aria-labelledby="application-tab">
<h3 class="mb-4">Application Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="app-check">
<label class="form-check-label" for="app-check">
App check
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" >
<label class="form-check-label" for="defaultCheck2">
Lorem ipsum dolor sit.
</label>
</div>
</div>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
<div class="tab-pane fade" id="notification" role="tabpanel" aria-labelledby="notification-tab">
<h3 class="mb-4">Notification Settings</h3>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notification1">
<label class="form-check-label" for="notification1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum accusantium accusamus, neque cupiditate quis
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notification2" >
<label class="form-check-label" for="notification2">
hic nesciunt repellat perferendis voluptatum totam porro eligendi.
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notification3" >
<label class="form-check-label" for="notification3">
commodi fugiat molestiae tempora corporis. Sed dignissimos suscipit
</label>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>>Solution :
Add classes ‘show’ and ‘active’ to your tabpane with id security
const sec_tab = document.getElementById('security-tab')
sec_tab.addEventListener("click", () => {
var elems = document.querySelectorAll(".active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
sec_tab.classList.add("active");
document.getElementById('security').classList.add("show","active");
}); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section class="py-5 my-5">
<div class="container">
<div class="bg-white shadow content-tab rounded-lg d-block d-sm-flex">
<div class="profile-tab-nav border-right">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="account-tab" data-toggle="pill" href="#account" role="tab" aria-controls="account" aria-selected="true">
<i class="fa fa-home text-center mr-1"></i>
Account
</a>
<a class="nav-link" id="password-tab" data-toggle="pill" href="#password" role="tab" aria-controls="password" aria-selected="false">
<i class="fa fa-key text-center mr-1"></i>
Password
</a>
<a class="nav-link" id="security-tab" data-toggle="collapse" data-target="#test" href="#security" role="tab" aria-controls="security" aria-selected="false">
<i class="fa fa-user text-center mr-1"></i>
Security
</a>
<div id="test" class="collapse">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</div>
<a class="nav-link" id="application-tab" data-toggle="pill" href="#application" role="tab" aria-controls="application" aria-selected="false">
<i class="fa fa-tv text-center mr-1"></i>
Application
</a>
<a class="nav-link" id="notification-tab" data-toggle="pill" href="#notification" role="tab" aria-controls="notification" aria-selected="false">
<i class="fa fa-bell text-center mr-1"></i>
Notification
</a>
</div>
</div>
<div class="tab-content p-4 p-md-5" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
<h3 class="mb-4">Account Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" value="Kiran">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" value="Acharya">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" value="kiranacharya287@gmail.com">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Phone number</label>
<input type="text" class="form-control" value="+91 9876543215">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Company</label>
<input type="text" class="form-control" value="Kiran Workspace">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Designation</label>
<input type="text" class="form-control" value="UI Developer">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Bio</label>
<textarea class="form-control" rows="4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero enim error similique quia numquam ullam corporis officia odio repellendus aperiam consequatur laudantium porro voluptatibus, itaque laboriosam veritatis voluptatum distinctio!</textarea>
</div>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
<div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab">
<h3 class="mb-4">Password Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Old password</label>
<input type="password" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>New password</label>
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Confirm new password</label>
<input type="password" class="form-control">
</div>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
<div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
<h3 class="mb-4">Security Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Login</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two-factor auth</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="recovery">
<label class="form-check-label" for="recovery">
Recovery
</label>
</div>
</div>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
<div class="tab-pane fade" id="application" role="tabpanel" aria-labelledby="application-tab">
<h3 class="mb-4">Application Settings</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="app-check">
<label class="form-check-label" for="app-check">
App check
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" >
<label class="form-check-label" for="defaultCheck2">
Lorem ipsum dolor sit.
</label>
</div>
</div>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
<div class="tab-pane fade" id="notification" role="tabpanel" aria-labelledby="notification-tab">
<h3 class="mb-4">Notification Settings</h3>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notification1">
<label class="form-check-label" for="notification1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum accusantium accusamus, neque cupiditate quis
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notification2" >
<label class="form-check-label" for="notification2">
hic nesciunt repellat perferendis voluptatum totam porro eligendi.
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notification3" >
<label class="form-check-label" for="notification3">
commodi fugiat molestiae tempora corporis. Sed dignissimos suscipit
</label>
</div>
</div>
<div>
<button class="btn btn-primary">Update</button>
<button class="btn btn-light">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>