Multiple dropdown menus triggering on the same click event

Multiple dropdown menus triggering on the same click event - javascript

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>

Related

Collapsible vertical sidebar menu icon with submenu

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>

How to search side Menu list using jquery/javascript after input?

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.

treeview expanding all elements that have children

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

How to scroll a portion of my window using protractor-jasmine

I want to test by clicking an element which is only visible when the sidebar section is scrolled. The sidebar is in the left end of the website and the element is in the bottom portion of the sidebar. I used:
browser.executeScript('window.sidebar.scrollTo(0,0);').then(function ()
but it's not working.
<div class="sidebar" data-active-color="white" data-background-color="red" data-image="../assets/img/sidebar-1.jpg">
<sidebar-cmp>
<div class="logo">
<div class="logo-normal">
<a class="simple-text" href="https://www.creative-tim.com">
Creative Tim
</a>
</div>
<div class="logo-img">
<img src="/assets/img/angular2-logo-white.png">
</div>
</div>
<div class="sidebar-wrapper">
<div class="user">
<div class="photo">
<img src="../assets/img/faces/avatar.jpg">
</div>
<div class="info">
<a class="collapsed" data-toggle="collapse" href="#collapseExample">
<span>
Tania Andrew
<b class="caret"></b>
</span>
</a>
<div class="collapse" id="collapseExample">
<ul class="nav">
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">MP</span>
<span class="sidebar-normal">My Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">EP</span>
<span class="sidebar-normal">Edit Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">S</span>
<span class="sidebar-normal">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="nav-container">
<ul class="nav">
<li routerlinkactive="active" class="active visible">
<a href="#/dashboard">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#componentsExamples">
<i class="material-icons">apps</i>
<p>Components
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="componentsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/components/buttons">
<span class="sidebar-mini">B</span>
<span class="sidebar-normal">Buttons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/grid">
<span class="sidebar-mini">GS</span>
<span class="sidebar-normal">Grid System</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/panels">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Panels</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/sweet-alert">
<span class="sidebar-mini">SA</span>
<span class="sidebar-normal">Sweet Alert</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/notifications">
<span class="sidebar-mini">N</span>
<span class="sidebar-normal">Notifications</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/icons">
<span class="sidebar-mini">I</span>
<span class="sidebar-normal">Icons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/typography">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Typography</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#formsExamples">
<i class="material-icons">content_paste</i>
<p>Forms
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="formsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/forms/regular">
<span class="sidebar-mini">RF</span>
<span class="sidebar-normal">Regular Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/extended">
<span class="sidebar-mini">EF</span>
<span class="sidebar-normal">Extended Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/validation">
<span class="sidebar-mini">VF</span>
<span class="sidebar-normal">Validation Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/wizard">
<span class="sidebar-mini">W</span>
<span class="sidebar-normal">Wizard</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#tablesExamples">
<i class="material-icons">grid_on</i>
<p>Tables
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="tablesExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/tables/regular">
<span class="sidebar-mini">RT</span>
<span class="sidebar-normal">Regular Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/extended">
<span class="sidebar-mini">ET</span>
<span class="sidebar-normal">Extended Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/datatables.net">
<span class="sidebar-mini">DT</span>
<span class="sidebar-normal">DataTables.net</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#mapsExamples">
<i class="material-icons">place</i>
<p>Maps
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="mapsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/maps/google">
<span class="sidebar-mini">GM</span>
<span class="sidebar-normal">Google Maps</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/fullscreen">
<span class="sidebar-mini">FSM</span>
<span class="sidebar-normal">Full Screen Map</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/vector">
<span class="sidebar-mini">VM</span>
<span class="sidebar-normal">Vector Map</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a href="#/widgets">
<i class="material-icons">widgets</i>
<p>Widgets</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/charts">
<i class="material-icons">timeline</i>
<p>Charts</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/calendar">
<i class="material-icons">date_range</i>
<p>Calendar</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#pagesExamples">
<i class="material-icons">image</i>
<p>Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="pagesExamples">
<ul class="nav">
<li>
<a href="./pricing.html">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Pricing</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/timeline">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Timeline Page</span>
</a>
</li>
<li>
<a href="./login.html">
<span class="sidebar-mini">LP</span>
<span class="sidebar-normal">Login Page</span>
</a>
</li>
<li>
<a href="./register.html">
<span class="sidebar-mini">RP</span>
<span class="sidebar-normal">Register Page</span>
</a>
</li>
<li>
<a href="./lock.html">
<span class="sidebar-mini">LSP</span>
<span class="sidebar-normal">Lock Screen Page</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/user">
<span class="sidebar-mini">UP</span>
<span class="sidebar-normal">User Page</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="sidebar-moving-tab" style="transform: translate3d(0px, 5px, 0px);"></div></div>
</div>
</sidebar-cmp>
<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
</div>

Specify the position at what location you have to scroll, try this one.
browser.executeScript('window.scrollTo(0,1000);').then(function () {
browser.sleep(5000);
console.log('Window ScrollTo','Done');
}).then(function() {
//wait for element to be displayed
browser.driver.wait(function(){
return someElement.isDisplayed().then(function (isVisible){
return isVisible === true;
},50000, 'Element not present ' );
},50000)
});

I've been using this line for scrolling.
You can also try it on console before using it on protractor.
e.g. $(".sidebar").scrollLeft(1000)
strPixels = 1000 //value in pixel
strClass = '.sidebar' //class of the element with scrollbar
browser.executeScript('$("' + strClass + '").scrollLeft(' + strPixels + ')');
Note: you can use scrollLeft or scrollTop to scroll horizontally or vertically.

var filter = theSwitch.pageBar;
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
theSwitch.pageBar.click();

How to add nav-active class in in navigation using jquery only one time

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>

We Keep Coding

JavaScript is the programming language of the Web.

Multiple dropdown menus triggering on the same click event - javascript

Related

Collapsible vertical sidebar menu icon with submenu

How to search side Menu list using jquery/javascript after input?

treeview expanding all elements that have children

How to scroll a portion of my window using protractor-jasmine

How to add nav-active class in in navigation using jquery only one time

Categories

Resources