Develop Reference

Accordion only toggle first item

I have the code below in my index.php, only the first item in the accordion shows.
For instance: when I click on Status or Repeated, am expecting the sub-menu of the clicked item but instead I get the result from the first list. That is Position.
<style>
ul .sub_main{
cursor: pointer;
}
.nested {
display: none;
}
.active {
display: block;
}
</style>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MANAGE</li>
<li class="sub_main"><i class="fa fa-users"></i><span>Positions</span><i class="fa fa-plus" aria-hidden="true"></i>
<ul class="nested">
<li class=""><i class="fa fa-users"></i> <span>a link 1</span></li>
<li class=""><i class="fa fa-users"></i> <span>a link 2</span></li>
</ul>
</li>
<li class="sub_main"><i class="fa fa-tasks"></i> <span>Status</span><i class="fa fa-plus" aria-hidden="true"></i>
<ul class="nested">
<li class=""><i class="fa fa-tasks"></i> <span>b link 1</span></li>
<li class=""><i class="fa fa-tasks"></i> <span>b link 2</span></li>
<li class=""><i class="fa fa-tasks"></i> <span>b link 3</span></li>
</ul>
</li>
<li class="sub_main"><i class="fa fa-tasks"></i> <span>Repeated</span><i class="fa fa-plus" aria-hidden="true"></i>
<ul class="nested">
<li class=""><i class="fa fa-tasks"></i> <span>c link 1</span></li>
<li class=""><i class="fa fa-tasks"></i> <span>c link 2</span></li>
</ul>
</li>
</ul>
this is the script to show the accordion item when clicked.
var toggler = document.getElementsByClassName("sub_main");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
});
}

Your JS line with the class toggle method is being called on the parent of the "sub-main" class. This means that the querySelector is grabbing the first ".nested" element it finds from your ul.sidebar-menu element, which will always be the top ".nested" group.
If you simply remove the "parentElement" from that JS line, then the querySelector will look for the first ".nested" within the ".sub-main" (this) element.
Your JS should look like:
var toggler = document.getElementsByClassName("sub_main");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.querySelector(".nested").classList.toggle("active");
});
}

Check whether a li element has any children with value using jQuery

I need to check if the each li element has any value or not using jQuery. I am providing my code below.
$("#navbarNavDropdown ul a").each(function() {
if ($(this).find('li').has("ul").length) {
alert('Yeah, we have a ul ' + $(this).text());
} else {
alert('Yeah, we dont have a ul ' + $(this).text());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul>
<li>Level 1
<ul>
<li>Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul class="dropdown-menu s-drop">
<li>Jacksonville</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-drop pstatic">
Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
</ul>
</div>
My requirement is: suppose inside the loop 1st li element has some children(ul) value here I want to print the text and 2nd li element has no children(ul) so it will come under else part. If also check the submenu(i.e-Level 2) has any ul value or not. My code is not working as expected.

This code will work you fine.
$("#navbarNavDropdown ul a").each(function() {
if ($(this).closest('li').has("ul").length) {
alert('Yeah, we have a ul ' + $(this).text());
} else {
alert('Yeah, we dont have a ul ' + $(this).text());
$(this).find('span').remove(); //to remove the span
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul>
<li>Level 1
<ul>
<li>Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul class="dropdown-menu s-drop">
<li>Jacksonville</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-drop pstatic">
Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
</ul>
</div>
But as per me, there is a better piece of code for your requirement
$("#navbarNavDropdown > ul > li").each(function() {
if ($(this).has("ul").length) {
alert('Yeah, we have a ul ' + $(this).text());
} else {
alert('Yeah, we dont have a ul ' + $(this).text());
$(this).find('span').remove(); //to remove the span
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul>
<li>Level 1
<ul>
<li>Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul class="dropdown-menu s-drop">
<li>Jacksonville</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-drop pstatic">
Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
</ul>
</div>
I have changed the #navbarNavDropdown ul a to #navbarNavDropdown>ul>li so it will only loop 2 times [saving the time and only looping first level elements removing the span] and as per your comment, I think this is the code you looking for.
I hope this solves your Bug.

This will solve your problem.
$("#navbarNavDropdown ul li").each(function() {
if ($(this).find("ul").length) {
alert('Yeah, we have a ul ' + $(this).text());
} else {
alert('No, we dont have a ul ' + $(this).text());
$(this).find('span').remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul>
<li>Level 1
<ul>
<li>Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul class="dropdown-menu s-drop">
<li>Jacksonville</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-drop pstatic">
Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
</ul>
</div>

The <a> elements do not have any child <ul> or <li> elements. The one <ul> is a sibling not a child.
If you meant it to be a child you need to change your html so that the closing </a> is after the closing </ul>. Note though since you have child <a> elements you won't be able to wrap the whole thing in the anchor as that is invalid html and the browser will not create such a structure.
You need to change your line to something that checks for siblings like:
$(this).next('ul').find('li ul').length
//Or go back up to the parent element and then go searching back down
$(this).parent().find('li ul').length

ul is not inside a element, so $(this).find('li').has("ul") couldn't work.
use $(this).next() get ul element.

An alternative.
$("#navbarNavDropdown ul").each(function() {
$.each(this.children, function(index, element) {
const text = element.innerText.split('\n').reverse()[0];
if (element.localName === 'li' && $(element).has('ul').length > 0) {
alert('Yeah, we have a ul ' + text);
} else {
alert('Yeah, we dont have a ul ' + text);
$(element).find('span').remove();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul>
<li>Level 1
<ul>
<li>Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul class="dropdown-menu s-drop">
<li>Jacksonville</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-drop pstatic">
Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
</ul>
</div>

How to remove span tag if list has no value using Jquery

I need one help. I have many menu-submenu list in dropdown manner using Bootstrap. Here I need to remove the span tag if any list or sublist has no value inside it dynamically. I am explaining my code below.
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_navigationUl" class="navbar-nav navbar-top-view nav">
<li class="dropdown mega-drop pstatic">
Programs<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul class="dropdown-menu mega-h-drop-menu fwidth activeul">
<li class="dropdown">
Business
<ul class="dropdown-menu s-drop">
<li>Business Office Administration</li>
</ul>
</li>
<li class="dropdown">
Cosmetology
<ul class="dropdown-menu s-drop">
<li>Cosmetology</li>
</ul>
</li>
<li class="pstatic">
Health Care & Administration
<ul class="dropdown-menu mega-v-drop-menu w-100">
<div class="row fullmenu">
<div class="col-sm-6 pull-left">
<ul>
<li>Limited Scope X-Ray Technician</li>
<li>Patient Care Technician</li>
<li>Pharmacy Technician</li>
<li>Health Services Administration</li>
</ul>
</div>
<div class="col-sm-6 pull-left">
<ul>
<li>Medical Assistant Technician</li>
<li>Medical Front Office & Billing</li>
<li>Dental Assistant</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
HVAC
<ul class="dropdown-menu s-drop">
<li>Heating Ventilation and Air Condition (HVAC)</li>
</ul>
</li>
<li class="dropdown">
Information Technology
<ul class="dropdown-menu s-drop">
<li>Information Technology</li>
<li>Computer Network Technician</li>
</ul>
</li>
<li class="dropdown">
Nursing
<ul class="dropdown-menu s-drop">
<li>Nursing</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-drop pstatic">
Campuses<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul class="dropdown-menu mega-h-drop-menu activeul">
<li>Houston</li>
<li>Orlando</li>
<li>Boynton Beach</li>
<li class="dropdown">
More
<ul class="dropdown-menu s-drop">
<li>Jacksonville</li>
<li>Hialeah</li>
<li>Tampa</li>
<li>Lauderdale Lakes</li>
<li>Margate</li>
<li>Miami (Main Campus)</li>
<li>Pembroke Pines</li>
<li>West Palm Beach</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-drop pstatic">
Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
<li class="dropdown mega-drop pstatic">
Financial Aid<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
<li class="dropdown mega-drop pstatic">
Career Services<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_ctl02_ctl04_childNodesContainer" class="dropdown-menu activeul">
<li class="dropdown mega-drop pstatic">
Employer Resources<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
</ul>
</li>
<li class="dropdown mega-drop pstatic">
About Us<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_ctl02_ctl05_childNodesContainer" class="dropdown-menu activeul">
<li class="dropdown mega-drop pstatic">
Accreditations<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</li>
</ul>
</li>
</ul>
</div>
The above code is the html generated output. Actually all data are dynamically bind over the li element. Here I need if any parent li or child li has no ul element or value then I will remove the respective span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span> tag. I need to make dynamically using Jquery/Javascript.

You can get it using jQuery:
$(".navbar-toggleable-sm span").each(function() {
if ($(this).parents("li:first").find("ul").length == 0)
$(this).hide();
else
$(this).show();
});
For each span found, check if its parent li has a child ul. If found, the span must be visible, otherwise should be hidden.

Add active class to li and parents through jquery

I'm a beginner to javascript, I've been trying to add the active class to a li using jquery i.e. When its clicked, expand li and make it active:
<script>
$(document).ready(function() {
var url = window.location['pathname'];
jQuery('li a').each(function() {
if($(this).attr('href') == url)
$(this).parent().addClass('active');
});
});
</script>
This only makes the sub-menu active but not expanded. But when I manually added the active class (as shown below) to treeview and li, it expanded and became active. How to dynamically add the active class through jquery?
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MENU</li>
<li class="treeview active">
<a href="#">
<i class="fa fa-table"></i> <span>USER</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-plus"></i> Add</li>
<li class="treeview active">
<a href="#"><i class="fa fa-circle-o"></i> Profile
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active"><i class="fa fa-circle-o"></i> View </li>
<li><i class="fa fa-circle-o"></i> Settings </li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>

So, you need to apply active class on all .treeview using parents:
$(this).parents('.treeview').addClass('active');

Actually, changing parent() to parents() fixed it:
$(this).parents().addClass('active');

Prevent Side Menu Collapse in Bootstrap

<div id="wrapper">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse collapse">
<ul class="nav" id="side-menu">
<li>
<a class="active" href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Operation <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<i class="fa fa-bar-chart-o fa-fw"> </i> Request<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
<i class="fa fa-dashboard fa-fw"></i> Browse
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Add
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Hello,
I have a bootstrap (3) side menu who works great but I can't understand why third level collapse (and with him his parent) on click.
I'd like to prevent his collapse and make it works like the second level.
Any suggestions?
Thanks.