I have a sidebar that has children on certain li elements, I have written some code in jQuery that should target each method, yet when I click on the list element, it slidetoggles all that have children.
my code:-
//dropdown toggle on treeview
const hasTree = $('.has-treeview'),
treeView = $('.nav-treeview');
$.each(hasTree,function(){
$(this).click(function(){
$(treeView).slideToggle();
});
});
and my html;
<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="#" class="nav-link" data-toggle="collapse" data-target=".nav-treeview" aria-expanded="false">
<i class="nav-icon fa fa-pie-chart"></i>
<p>
Charts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>ChartJS</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Flot</p>
</a>
</li>
<li class="nav-item">
<a href="p#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-tree"></i>
<p>
UI Elements
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Buttons</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Sliders</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-edit"></i>
<p>
Forms
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>General Elements</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Advanced Elements</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Editors</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-table"></i>
<p>
Tables
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Simple Tables</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Data Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-calendar"></i>
<p>
Calendar
<span class="badge badge-info right">2</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-envelope-o"></i>
<p>
Mailbox
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inbox</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Compose</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Read</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Pages
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Invoice</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Profile</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Register</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-plus-square-o"></i>
<p>
Extras
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 404</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 500</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Blank Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Starter Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">MISCELLANEOUS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-file"></i>
<p>Documentation</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
so basically I just want to expand the treeview for the one that was clicked, not all of them. Where am I going wrong?
jsfiddle https://jsfiddle.net/xpvt214o/661999/
Try this:
//dropdown toggle on treeview
const hasTree = $('.has-treeview');
$.each(hasTree,function(){
$(this).click(function(){
$(this).children('.nav-treeview').slideToggle();
});
});
JSFiddle
//dropdown toggle on treeview
const hasTree = $('.has-treeview'),
treeView = $('.nav-treeview');
$(hasTree).click(function(){
$(this).find('.nav-treeview').slideToggle();
});
Only add listeners to elements with hasTree classes and than find their treeview and toggle it.
Change only data-accordion from false to true!
Change from:
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
to
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true">
Related
A collapsible sidebar menu, where I'm looking for a plus (+) sign to toggle to a minus (-) sign. When the sidebar menu opens and toggles the same operation happened again.
From the documentation and community code resource, I'm able to toggle the collapse menu, but I'm looking for a right-side plus (+) icon also changed from a plus (+) to a minus(-) icon
I used bootstrap icons and for the plus and dash signs following classes are used respectively <i class="bi bi-plus"></i> , <i class="bi bi-dash"></i>
;
(function() {
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.g-sidebar .nav-link').forEach(function(element) {
element.addEventListener('click', function(e) {
let nextEl = element.nextElementSibling;
let parentEl = element.parentElement;
if (nextEl) {
e.preventDefault();
let sidebarNavCollapse = new bootstrap.Collapse(nextEl);
if (nextEl.classList.contains('show')) {
sidebarNavCollapse.hide();
} else {
sidebarNavCollapse.show();
// find other submenus with class=show
let opened_submenu = parentEl.parentElement.querySelector('.submenu.show');
// if it exists, then close all of them
if (opened_submenu) {
new bootstrap.Collapse(opened_submenu);
}
}
}
});
})
});
})();
.g-aside {
background-color: #8c8c8c;
width: 260px;
}
.nav {
--bs-nav-link-padding-x: 1rem;
--bs-nav-link-padding-y: 0.5rem;
--bs-nav-link-color: var(--bs-link-color);
--bs-nav-link-hover-color: var(--bs-link-hover-color);
--bs-nav-link-disabled-color: #6c757d;
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.submenu>li {
list-style: none;
}
.g-sidebar .nav-link {
position: relative;
display: flex;
font-family: quicksand, sans-serif;
color: #fff;
width: calc(260px - 1rem);
transition: width .3s ease-in-out;
list-style: none!;
}
.g-sidebar .nav-link p {
margin-bottom: 0;
padding-left: 1.4rem;
display: inline-block;
}
.g-sidebar .nav-link p i,
.g-sidebar .nav-link p span {
right: 1rem;
position: absolute;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<aside class="g-aside">
<!--Sidebar Area-->
<div class="g-sidebar-area">
<nav class="g-sidebar py-2 mb-4">
<ul class="nav flex-column" id="nav_accordion">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-person-fill"></i>
<p>Agents</p>
</a>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-columns-gap"></i>
<p>Dashboard <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-box-fill"></i>
<p>IVR <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-grid-1x2-fill"></i>
<p>Page <span class="badge bg-primary">12</span></p>
</a>
</li>
<!-- <li class="ms-3 mt-3">PROMOTION</li>-->
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-record-btn-fill"></i>
<p>Campaign <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-file-earmark-text-fill"></i>
<p>Report <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-file-plus-fill"></i>
<p>New Report <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-record-btn-fill"></i>
<p> Skill </p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-voicemail"></i>
<p>Voice Mail </p>
</a>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#"><i class="bi bi-chat-right-text-fill"></i>
<p>Chat <i class="bi bi-plus"></i></p></a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#"><i class="bi bi-envelope-fill"></i>
<p>Email <i class="bi bi-plus"></i></p></a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#"><i class="bi bi-file-earmark-text-fill"></i>
<p>SMS <i class="bi bi-plus"></i></p></a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-window-stack"></i>
<p>CRM <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-telephone-inbound-fill"></i>
<p>CRM Inbound <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
CSS Only Solution
If you wire up the menus as shown in the Bootstrap documentation then you won't need the custom JavaScript and can toggle the icons using only css. To do this, we only need to add a data-bs-toggle attribute, an id, and an href. Compare the original and modified code below for the changes that must be made to each of the collapsible menus.
Original:
<a class="nav-link">
<i class="bi bi-columns-gap"></i>
<p>Dashboard
<i class="bi bi-plus"></i>
</p>
</a>
<ul class="submenu collapse">
...
Modified:
<a class="nav-link collapsed" href="#dashboard" data-bs-toggle="collapse">
<i class="bi bi-columns-gap"></i>
<p>Dashboard
<i class="bi bi-plus"></i>
<i class="bi bi-dash"></i>
</p>
</a>
<ul class="submenu collapse" id="dashboard">
...
When a menu is opened, Bootstrap adds the collapsed class to the nav-link. And we can use that class to show or hide the first and last icon.
CSS:
.nav-link.collapsed i:first-child {
display: inline;
}
.nav-link:not(.collapsed) i:first-child {
display: none;
}
.nav-link.collapsed i:last-child {
display: none;
}
.nav-link:not(.collapsed) i:last-child {
display: inline;
}
.nav-link.collapsed i:first-child {
display: inline;
}
.nav-link:not(.collapsed) i:first-child {
display: none;
}
.nav-link.collapsed i:last-child {
display: none;
}
.nav-link:not(.collapsed) i:last-child {
display: inline;
}
/* original style */
.g-aside {
background-color: #8c8c8c;
width: 260px;
}
.nav {
--bs-nav-link-padding-x: 1rem;
--bs-nav-link-padding-y: 0.5rem;
--bs-nav-link-color: var(--bs-link-color);
--bs-nav-link-hover-color: var(--bs-link-hover-color);
--bs-nav-link-disabled-color: #6c757d;
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.submenu>li {
list-style: none;
}
.g-sidebar .nav-link {
position: relative;
display: flex;
font-family: quicksand, sans-serif;
color: #fff;
width: calc(260px - 1rem);
transition: width .3s ease-in-out;
list-style: none!;
}
.g-sidebar .nav-link p {
margin-bottom: 0;
padding-left: 1.4rem;
display: inline-block;
}
.g-sidebar .nav-link p i,
.g-sidebar .nav-link p span {
right: 1rem;
position: absolute;
}
<aside class="g-aside">
<div class="g-sidebar-area">
<nav class="g-sidebar py-2 mb-4">
<ul class="nav flex-column" id="nav_accordion">
<li class="nav-item has-submenu">
<a class="nav-link collapsed" href="#dashboard" data-bs-toggle="collapse">
<i class="bi bi-columns-gap"></i>
<p>Dashboard
<i class="bi bi-plus"></i>
<i class="bi bi-dash"></i>
</p>
</a>
<ul class="submenu collapse" id="dashboard">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link collapsed" href="#ivr" data-bs-toggle="collapse">
<i class="bi bi-box-fill"></i>
<p>IVR
<i class="bi bi-plus"></i>
<i class="bi bi-dash"></i>
</p>
</a>
<ul class="submenu collapse" id="ivr">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<!-- other menus not shown -->
</ul>
</nav>
</div>
</aside>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
Try querying for bi-plus and if that doesn't work query bi-dash and flag self. Then you can remove all dashes and replace with plus, and depending on flag add plus or dash
;
(function() {
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.g-sidebar .nav-link').forEach(function(element) {
element.addEventListener('click', function(e) {
let self=false
let nextEl = element.nextElementSibling;
let parentEl = element.parentElement;
let childImg = element.querySelector('.bi-plus');
if(!childImg){
self = true;
childImg = element.querySelector('.bi-dash');
}
if (nextEl) {
e.preventDefault();
let sidebarNavCollapse = new bootstrap.Collapse(nextEl);
if (nextEl.classList.contains('show')) {
sidebarNavCollapse.hide();
} else {
document.querySelectorAll('.nav-link .bi-dash').forEach(function(elem){
if (elem!==childImg) {
elem.classList.add('bi-plus')
elem.classList.remove('bi-dash')
}
})
if(!self){
childImg.classList.remove('bi-plus')
childImg.classList.add('bi-dash')
} else {
childImg.classList.remove('bi-dash')
childImg.classList.add('bi-plus')
}
sidebarNavCollapse.show();
// find other submenus with class=show
let opened_submenu = parentEl.parentElement.querySelector('.submenu.show');
// if it exists, then close all of them
if (opened_submenu) {
new bootstrap.Collapse(opened_submenu);
}
}
}
});
})
});
})();
.g-aside {
background-color: #8c8c8c;
width: 260px;
}
.nav {
--bs-nav-link-padding-x: 1rem;
--bs-nav-link-padding-y: 0.5rem;
--bs-nav-link-color: var(--bs-link-color);
--bs-nav-link-hover-color: var(--bs-link-hover-color);
--bs-nav-link-disabled-color: #6c757d;
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.submenu>li {
list-style: none;
}
.g-sidebar .nav-link {
position: relative;
display: flex;
font-family: quicksand, sans-serif;
color: #fff;
width: calc(260px - 1rem);
transition: width .3s ease-in-out;
list-style: none!;
}
.g-sidebar .nav-link p {
margin-bottom: 0;
padding-left: 1.4rem;
display: inline-block;
}
.g-sidebar .nav-link p i,
.g-sidebar .nav-link p span {
right: 1rem;
position: absolute;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<aside class="g-aside">
<!--Sidebar Area-->
<div class="g-sidebar-area">
<nav class="g-sidebar py-2 mb-4">
<ul class="nav flex-column" id="nav_accordion">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-person-fill"></i>
<p>Agents</p>
</a>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-columns-gap"></i>
<p>Dashboard <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-box-fill"></i>
<p>IVR <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-grid-1x2-fill"></i>
<p>Page <span class="badge bg-primary">12</span></p>
</a>
</li>
<!-- <li class="ms-3 mt-3">PROMOTION</li>-->
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-record-btn-fill"></i>
<p>Campaign <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-file-earmark-text-fill"></i>
<p>Report <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-file-plus-fill"></i>
<p>New Report <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-record-btn-fill"></i>
<p> Skill </p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-voicemail"></i>
<p>Voice Mail </p>
</a>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#"><i class="bi bi-chat-right-text-fill"></i>
<p>Chat <i class="bi bi-plus"></i></p></a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#"><i class="bi bi-envelope-fill"></i>
<p>Email <i class="bi bi-plus"></i></p></a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#"><i class="bi bi-file-earmark-text-fill"></i>
<p>SMS <i class="bi bi-plus"></i></p></a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-window-stack"></i>
<p>CRM <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-submenu">
<a class="nav-link" href="#">
<i class="bi bi-telephone-inbound-fill"></i>
<p>CRM Inbound <i class="bi bi-plus"></i></p>
</a>
<ul class="submenu collapse">
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
<li>
<a class="nav-link" href="#"> <i class="bi bi-journal-check"></i>
<p>Submenu item 1</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
I have input filed in top of Menu that i want to search list of menu inside all a anchor tag.
I tried a lot but not able to achieve required output. Any one there to help me.
I want to display only all the anchor tag. If the input field is empty the menu should be ni normal state.
<nav class="navbar-default" role="navigation" style="overflow: hidden; width: auto; height: 691px;">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li>
<input type="text" id="txt_search" class="form-control ui-front" placeholder="Search Menu..." autocomplete="off" onkeyup="searchAppMenus();">
</li>
<li class="special_link_pos">
<a>FOOD</a>
</li>
<li class="nav-child">
<i class="fa fa-wrench"></i> <span class="nav-label">SET UP</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Menu Header</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-copy"></i> <span class="nav-label">TRANSACTION</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Sales</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-clipboard-check"></i> <span class="nav-label">REPORT</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Shift Handover</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-clipboard-check"></i> <span class="nav-label">REPORT</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a class="nav-link" onclick="go(this);">
<i class="far fa-circle nav-icon"></i>Accounting Report
<span class="fa fa-arrow-down"></span>
</a>
<ul class="nav nav-third-level collapse">
<li>
<a class="nav-link" onclick="go(this);">
<i class="far fa-dot-circle nav-icon"></i>
Profit and Loss
</a>
</li>
</ul>
</li>
<li class="nav-subchild">
<a class="nav-link" onclick="go(this);">
<i class="far fa-circle nav-icon"></i>Accounting Ledgers
</a>
</li>
</ul>
</li>
<li class="special_link_misc">
<a>MISCELLANEOUS</a>
</li>
<li class="nav-child">
<i class="fa fa-cog"></i> <span class="nav-label">GENERAL</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a onclick="go(this);"> <i class="far fa-circle nav-icon"></i>Group Right</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-cog"></i> <span class="nav-label">UTILITY</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a onclick="go(this);"> <i class="far fa-circle nav-icon"></i>Company</a>
</li>
</ul>
</li>
</ul>
</div>
<script>
function searchAppmenus() {
var input, filter, ul, li, a, i;
input = document.getElementById("txt_search");
filter = input.value.toUpperCase();
ul = document.getElementsByClassName("nav");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
This code is not working. what's wrong with this code.
Please anyone there to Solve this..
Consider the following.
$(function() {
function filterMenu(term) {
var filter, input = term.toUpperCase();
$(".nav a").each(function(i, el) {
filter = $(el).text().toUpperCase();
if (filter.indexOf(input) < 0) {
$(el).parent().hide();
}
});
}
$("#txt_search").keyup(function(event) {
// Show all Items
$(".nav li").show();
// If Empty, do nothing
if ($(this).val() !== "") {
// Filter out items that do not match
filterMenu($(this).val());
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-default" role="navigation" style="overflow: hidden; width: auto; height: 691px;">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li>
<input type="text" id="txt_search" class="form-control ui-front" placeholder="Search Menu..." autocomplete="off">
</li>
<li class="special_link_pos">
<a>FOOD</a>
</li>
<li class="nav-child">
<i class="fa fa-wrench"></i> <span class="nav-label">SET UP</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Menu Header</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-copy"></i> <span class="nav-label">TRANSACTION</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Sales</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-clipboard-check"></i> <span class="nav-label">REPORT</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Shift Handover</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-clipboard-check"></i> <span class="nav-label">REPORT</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a class="nav-link" onclick="go(this);">
<i class="far fa-circle nav-icon"></i>Accounting Report
<span class="fa fa-arrow-down"></span>
</a>
<ul class="nav nav-third-level collapse">
<li>
<a class="nav-link" onclick="go(this);">
<i class="far fa-dot-circle nav-icon"></i> Profit and Loss
</a>
</li>
</ul>
</li>
<li class="nav-subchild">
<a class="nav-link" onclick="go(this);">
<i class="far fa-circle nav-icon"></i>Accounting Ledgers
</a>
</li>
</ul>
</li>
<li class="special_link_misc">
<a>MISCELLANEOUS</a>
</li>
<li class="nav-child">
<i class="fa fa-cog"></i> <span class="nav-label">GENERAL</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a onclick="go(this);"> <i class="far fa-circle nav-icon"></i>Group Right</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-cog"></i> <span class="nav-label">UTILITY</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a onclick="go(this);"> <i class="far fa-circle nav-icon"></i>Company</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
This answer is offered in jQuery. It iterates all the anchors and looks for the term in the text of the item. If it's not found, it is hidden.
I have the following code from this link which seems to trigger the slideToggle event for both drop-down menus. I can't seem to find a solution to triggering only the child drop-down menu of the clicked li element.
A jQuery solution would be best if possible!
var hi = $( '.header-item.has-sub' );
var hdd = hi.children( '.header-sub' );
hi.each(function() {
$(this).click(function() {
hdd.toggleClass( 'open' );
hdd.slideToggle( 'fast' );
});
});
ul li > ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-menu">
<li class="header-item">
<a href="#">
<i class="uil uil-cog"></i>
<span>Settings</span>
</a>
</li>
<li class="header-item has-sub">
<a href="#">
<i class="uil uil-bell"></i>
<span>Notifications</span>
</a>
<ul class="header-sub">
<li class="sub-item">
<a href="#">
<i class="uil uil-edit"></i>
<span>Details</span>
</a>
</li>
<li class="sub-item">
<a href="#">
<i class="uil uil-map-marker"></i>
<span>Address</span>
</a>
</li>
<li class="sub-item">
<a href="#">
<i class="uil uil-signout"></i>
<span>Log Out</span>
</a>
</li>
</ul>
</li>
<li class="header-item has-sub">
<a href="#">
<i class="uil uil-user"></i>
<span>Profile</span>
</a>
<ul class="header-sub">
<li class="sub-item">
<a href="#">
<i class="uil uil-edit"></i>
<span>Details</span>
</a>
</li>
<li class="sub-item">
<a href="#">
<i class="uil uil-map-marker"></i>
<span>Address</span>
</a>
</li>
<li class="sub-item">
<a href="#">
<i class="uil uil-signout"></i>
<span>Log Out</span>
</a>
</li>
</ul>
</li>
</ul>
You need to check in your click event
$('.header-item.has-sub').click(function() {
var hdd = $(this).find('ul.header-sub');
$(hdd).toggleClass('open').slideToggle('fast');
});
ul li > ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-menu">
<li class="header-item">
<a href="#">
<i class="uil uil-cog"></i>
<span>Settings</span>
</a>
</li>
<li class="header-item has-sub">
<a href="#">
<i class="uil uil-bell"></i>
<span>Notifications</span>
</a>
<ul class="header-sub">
<li class="sub-item">
<a href="#">
<i class="uil uil-edit"></i>
<span>Details</span>
</a>
</li>
<li class="sub-item">
<a href="#">
<i class="uil uil-map-marker"></i>
<span>Address</span>
</a>
</li>
<li class="sub-item">
<a href="#">
<i class="uil uil-signout"></i>
<span>Log Out</span>
</a>
</li>
</ul>
</li>
<li class="header-item has-sub">
<a href="#">
<i class="uil uil-user"></i>
<span>Profile</span>
</a>
<ul class="header-sub">
<li class="sub-item">
<a href="#">
<i class="uil uil-edit"></i>
<span>Details</span>
</a>
</li>
<li class="sub-item">
<a href="#">
<i class="uil uil-map-marker"></i>
<span>Address</span>
</a>
</li>
<li class="sub-item">
<a href="#">
<i class="uil uil-signout"></i>
<span>Log Out</span>
</a>
</li>
</ul>
</li>
</ul>
I am trying to use this theme: https://colorlib.com/polygon/sufee/index.html
This is the HTML it is using:
<ul class="nav navbar-nav">
<li class="active">
<i class="menu-icon fa fa-dashboard"></i>Dashboard
</li>
<h3 class="menu-title">UI elements</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown show">
<i class="menu-icon fa fa-laptop"></i>Components
<ul class="sub-menu children dropdown-menu show">
<li><i class="fa fa-puzzle-piece"></i>Buttons</li>
<li><i class="fa fa-id-badge"></i>Badges</li>
<li><i class="fa fa-bars"></i>Tabs</li>
<li><i class="fa fa-share-square-o"></i>Social Buttons</li>
<li><i class="fa fa-id-card-o"></i>Cards</li>
<li><i class="fa fa-exclamation-triangle"></i>Alerts</li>
<li><i class="fa fa-spinner"></i>Progress Bars</li>
<li><i class="fa fa-fire"></i>Modals</li>
<li><i class="fa fa-book"></i>Switches</li>
<li><i class="fa fa-th"></i>Grids</li>
<li><i class="fa fa-file-word-o"></i>Typography</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-table"></i>Tables
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-table"></i>Basic Table</li>
<li><i class="fa fa-table"></i>Data Table</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-th"></i>Forms
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-th"></i>Basic Form</li>
<li><i class="menu-icon fa fa-th"></i>Advanced Form</li>
</ul>
</li>
<h3 class="menu-title">Icons</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-tasks"></i>Icons
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-fort-awesome"></i>Font Awesome</li>
<li><i class="menu-icon ti-themify-logo"></i>Themefy Icons</li>
</ul>
</li>
<li>
<i class="menu-icon ti-email"></i>Widgets
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bar-chart"></i>Charts
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-line-chart"></i>Chart JS</li>
<li><i class="menu-icon fa fa-area-chart"></i>Flot Chart</li>
<li><i class="menu-icon fa fa-pie-chart"></i>Peity Chart</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-area-chart"></i>Maps
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-map-o"></i>Google Maps</li>
<li><i class="menu-icon fa fa-street-view"></i>Vector Maps</li>
</ul>
</li>
<h3 class="menu-title">Extras</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-glass"></i>Pages
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-sign-in"></i>Login</li>
<li><i class="menu-icon fa fa-sign-in"></i>Register</li>
<li><i class="menu-icon fa fa-paper-plane"></i>Forget Pass</li>
</ul>
</li>
</ul>
It is pretty standard. Now I want to add second level of dropdown i.e below Buttons I want to have it's items as Button 1, Button 2, Button 3
so I try to put this HTML there:
<li class="menu-item-has-children dropdown">
<a href="#" class="active" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-puzzle-piece fa-2x"></i> Buttons</a>
<ul class="sub-menu children dropdown-menu">
<li>
<a>Button 1</a>
</li>
<li>
<a>Button 2</a>
</li>
<li>
<a>Button 3</a>
</li>
</ul>
</li>
Button when I click on Buttons to open up it's dropdown it instead closes the parent. What am I doing wrong?
Any help is appreciated.
The only way to solve this issue is to add javascript.
Add this to your js file:
$('.menu-item-has-children .menu-item-has-children a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
Reference:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
As you have not update any fiddle yet. Watching to your code what I have found wrong is with the class attribute which you have mentioned multiple times
<a href="#" class="active" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-puzzle-piece fa-2x"></i> Buttons</a>
on above code you are using two classes remove class="active" and then try Hope it will help
Please help me to sort out this problem. I want to add nav-active class in li element only one time means if child element is selected then parent li should not have nav-active class. I am using following code but it is not working according to my requirements.
Thanks in advance.
Here is my code:
$('ul li').find('li').click(function(){
var $this = $(this);
$('li').removeClass('nav-active');
$this.addClass('nav-active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>
In you current example if you will do a console.log($(this), it will show you 2 elements in the console if you have clicked a child element. One for the child element and one for its parent li element. This is called event bubbling. You need to take care of event bubbling by stop propagating the event.
Try this.
$('li').click(function(event){
event.stopPropagation()
var $this = $(this);
$('li').removeClass('nav-active');
$this.addClass('nav-active');
});
.nav-active a
{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>
The main idea is to run the click function only once because when you click child element the parent element also gets clicked automatically right after that so $(this) ends up selecting parent item, everytime the child element gets clicked.
I added css for .nav-active class to show the code working. Try this.
$(document).ready(function(){
$('nav li').one("click",function(){
$('nav li').removeClass('nav-active');
$(this).addClass('nav-active');
})
})
.nav-active>a>span{
font-size:20px;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent item-b">
<a href="#">
<i class="icon icon-global" aria-hidden="true"></i>
<span>Global</span>
</a>
<ul class="nav nav-children">
<li class="item-a">
<a href="#">
<span>News</span>
</a>
</li>
<li>
<a href="#">
<span>Highlights</span>
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-document-512"></i><span>My Documents</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>My Download</span>
</a>
</li>
<li>
<a href="#">
<span>My Wishlist</span>
</a>
</li>
<li>
<a href="#">
<span>My New Documents</span></a>
</li>
</ul>
</li>
<li class="nav-parent"><!-- nav-expanded-->
<a class="">
<i class="icon icon-marketing-material" aria-hidden="true"></i>
<span>Marketing Material</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#">
<span>Batch Download</span>
</a>
</li>
<li>
<a href="#">
<span>Upload</span>
</a>
</li>
<li>
<a href="#">
<span>Edit/Delete</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'>
<span>New Uploads</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'>
<span>Revisions</span></a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'>
<span>Top Downloads</span></a>
</li>
</ul>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'>
<i class="icon icon-11111" aria-hidden="true"></i>
<span>GML Forum</span>
</a>
</li>
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'>
<i class="icon icon-market-research" aria-hidden="true"></i>
<span>Market Research</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-market-access-2" aria-hidden="true"></i>
<span>Market Access</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-compete" aria-hidden="true"></i>
<span>Competetive Intelligence</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-portal" aria-hidden="true"></i>
<span>Portal Tutorial</span>
</a>
</li>
<li>
<a href="#">
<i class="icon icon-new-product-launch" aria-hidden="true"></i>
<span>New Product Launch</span>
</a>
</li>
<li class="nav-parent">
<a href="#">
<i class="icon icon-portal-admin"></i><span>Portal Administration</span>
</a>
<ul class="nav nav-children" id="menu1">
<li>
<a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'>
<span>Social Media</span>
</a>
</li>
</ul>
</li>
<li><hr class="separator" /></li>
<li><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</li
></ul>
</nav>