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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section >
<div >
<div >
<div >
<div id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a id="account-tab" data-toggle="pill" href="#account" role="tab" aria-controls="account" aria-selected="true">
<i ></i>
Account
</a>
<a id="password-tab" data-toggle="pill" href="#password" role="tab" aria-controls="password" aria-selected="false">
<i ></i>
Password
</a>
<a id="security-tab" data-toggle="collapse" data-target="#test" href="#security" role="tab" aria-controls="security" aria-selected="false">
<i ></i>
Security
</a>
<div id="test" >
<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 id="application-tab" data-toggle="pill" href="#application" role="tab" aria-controls="application" aria-selected="false">
<i ></i>
Application
</a>
<a id="notification-tab" data-toggle="pill" href="#notification" role="tab" aria-controls="notification" aria-selected="false">
<i ></i>
Notification
</a>
</div>
</div>
<div id="v-pills-tabContent">
<div id="account" role="tabpanel" aria-labelledby="account-tab">
<h3 >Account Settings</h3>
<div >
<div >
<div >
<label>First Name</label>
<input type="text" value="Kiran">
</div>
</div>
<div >
<div >
<label>Last Name</label>
<input type="text" value="Acharya">
</div>
</div>
<div >
<div >
<label>Email</label>
<input type="text" value="[email protected]">
</div>
</div>
<div >
<div >
<label>Phone number</label>
<input type="text" value=" 91 9876543215">
</div>
</div>
<div >
<div >
<label>Company</label>
<input type="text" value="Kiran Workspace">
</div>
</div>
<div >
<div >
<label>Designation</label>
<input type="text" value="UI Developer">
</div>
</div>
<div >
<div >
<label>Bio</label>
<textarea 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 >Update</button>
<button >Cancel</button>
</div>
</div>
<div id="password" role="tabpanel" aria-labelledby="password-tab">
<h3 >Password Settings</h3>
<div >
<div >
<div >
<label>Old password</label>
<input type="password" >
</div>
</div>
</div>
<div >
<div >
<div >
<label>New password</label>
<input type="password" >
</div>
</div>
<div >
<div >
<label>Confirm new password</label>
<input type="password" >
</div>
</div>
</div>
<div>
<button >Update</button>
<button >Cancel</button>
</div>
</div>
<div id="security" role="tabpanel" aria-labelledby="security-tab">
<h3 >Security Settings</h3>
<div >
<div >
<div >
<label>Login</label>
<input type="text" >
</div>
</div>
<div >
<div >
<label>Two-factor auth</label>
<input type="text" >
</div>
</div>
<div >
<div >
<div >
<input type="checkbox" value="" id="recovery">
<label for="recovery">
Recovery
</label>
</div>
</div>
</div>
</div>
<div>
<button >Update</button>
<button >Cancel</button>
</div>
</div>
<div id="application" role="tabpanel" aria-labelledby="application-tab">
<h3 >Application Settings</h3>
<div >
<div >
<div >
<div >
<input type="checkbox" value="" id="app-check">
<label for="app-check">
App check
</label>
</div>
<div >
<input type="checkbox" value="" id="defaultCheck2" >
<label for="defaultCheck2">
Lorem ipsum dolor sit.
</label>
</div>
</div>
</div>
</div>
<div>
<button >Update</button>
<button >Cancel</button>
</div>
</div>
<div id="notification" role="tabpanel" aria-labelledby="notification-tab">
<h3 >Notification Settings</h3>
<div >
<div >
<input type="checkbox" value="" id="notification1">
<label for="notification1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum accusantium accusamus, neque cupiditate quis
</label>
</div>
</div>
<div >
<div >
<input type="checkbox" value="" id="notification2" >
<label for="notification2">
hic nesciunt repellat perferendis voluptatum totam porro eligendi.
</label>
</div>
</div>
<div >
<div >
<input type="checkbox" value="" id="notification3" >
<label for="notification3">
commodi fugiat molestiae tempora corporis. Sed dignissimos suscipit
</label>
</div>
</div>
<div>
<button >Update</button>
<button >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/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>CodePudding user response：
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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section >
<div >
<div >
<div >
<div id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a id="account-tab" data-toggle="pill" href="#account" role="tab" aria-controls="account" aria-selected="true">
<i ></i>
Account
</a>
<a id="password-tab" data-toggle="pill" href="#password" role="tab" aria-controls="password" aria-selected="false">
<i ></i>
Password
</a>
<a id="security-tab" data-toggle="collapse" data-target="#test" href="#security" role="tab" aria-controls="security" aria-selected="false">
<i ></i>
Security
</a>
<div id="test" >
<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 id="application-tab" data-toggle="pill" href="#application" role="tab" aria-controls="application" aria-selected="false">
<i ></i>
Application
</a>
<a id="notification-tab" data-toggle="pill" href="#notification" role="tab" aria-controls="notification" aria-selected="false">
<i ></i>
Notification
</a>
</div>
</div>
<div id="v-pills-tabContent">
<div id="account" role="tabpanel" aria-labelledby="account-tab">
<h3 >Account Settings</h3>
<div >
<div >
<div >
<label>First Name</label>
<input type="text" value="Kiran">
</div>
</div>
<div >
<div >
<label>Last Name</label>
<input type="text" value="Acharya">
</div>
</div>
<div >
<div >
<label>Email</label>
<input type="text" value="[email protected]">
</div>
</div>
<div >
<div >
<label>Phone number</label>
<input type="text" value=" 91 9876543215">
</div>
</div>
<div >
<div >
<label>Company</label>
<input type="text" value="Kiran Workspace">
</div>
</div>
<div >
<div >
<label>Designation</label>
<input type="text" value="UI Developer">
</div>
</div>
<div >
<div >
<label>Bio</label>
<textarea 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 >Update</button>
<button >Cancel</button>
</div>
</div>
<div id="password" role="tabpanel" aria-labelledby="password-tab">
<h3 >Password Settings</h3>
<div >
<div >
<div >
<label>Old password</label>
<input type="password" >
</div>
</div>
</div>
<div >
<div >
<div >
<label>New password</label>
<input type="password" >
</div>
</div>
<div >
<div >
<label>Confirm new password</label>
<input type="password" >
</div>
</div>
</div>
<div>
<button >Update</button>
<button >Cancel</button>
</div>
</div>
<div id="security" role="tabpanel" aria-labelledby="security-tab">
<h3 >Security Settings</h3>
<div >
<div >
<div >
<label>Login</label>
<input type="text" >
</div>
</div>
<div >
<div >
<label>Two-factor auth</label>
<input type="text" >
</div>
</div>
<div >
<div >
<div >
<input type="checkbox" value="" id="recovery">
<label for="recovery">
Recovery
</label>
</div>
</div>
</div>
</div>
<div>
<button >Update</button>
<button >Cancel</button>
</div>
</div>
<div id="application" role="tabpanel" aria-labelledby="application-tab">
<h3 >Application Settings</h3>
<div >
<div >
<div >
<div >
<input type="checkbox" value="" id="app-check">
<label for="app-check">
App check
</label>
</div>
<div >
<input type="checkbox" value="" id="defaultCheck2" >
<label for="defaultCheck2">
Lorem ipsum dolor sit.
</label>
</div>
</div>
</div>
</div>
<div>
<button >Update</button>
<button >Cancel</button>
</div>
</div>
<div id="notification" role="tabpanel" aria-labelledby="notification-tab">
<h3 >Notification Settings</h3>
<div >
<div >
<input type="checkbox" value="" id="notification1">
<label for="notification1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum accusantium accusamus, neque cupiditate quis
</label>
</div>
</div>
<div >
<div >
<input type="checkbox" value="" id="notification2" >
<label for="notification2">
hic nesciunt repellat perferendis voluptatum totam porro eligendi.
</label>
</div>
</div>
<div >
<div >
<input type="checkbox" value="" id="notification3" >
<label for="notification3">
commodi fugiat molestiae tempora corporis. Sed dignissimos suscipit
</label>
</div>
</div>
<div>
<button >Update</button>
<button >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/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>