jQuery Accordion Navigation Menu - javascript

I've got a jquery vertical accordion navigation menu. Everthing's working fine but when i expand a list item and if I click on a list item it's getting hidden.
Here's the code:
HTML :
<div class="sidebar">
<ul>
<li>
Item 1 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i>
<ul class="sub-menu">
<li>
Sub Item 1
</li>
<li>
Sub Item 2
</li>
</ul>
</li>
<li>
Item 2 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i>
<ul class="sub-menu">
<li>
Sub Item 1
</li>
<li>
Sub Item 2
</li>
<li>
Sub Item 3
</li>
</ul>
</li>
<li>
Item 3 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i>
<ul class="sub-menu">
<li>
Sub Item 1
</li>
<li>
Sub Item 2
</li>
<li>
Sub Item 3
</li>
</ul>
</li>
<li>
Item 4 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i>
<ul class="sub-menu">
<li>
Sub Item 1
</li>
<li>
Sub Item 2
</li>
</ul>
</li>
</ul>
</div>
JS :
function toggleAccordion(li) {
if(li.hasClass('active')) {
li.removeClass('active');
$('.sub-menu', li).slideUp();
$('i', li).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left');
}
else {
$('.sidebar > ul > li.active .sub-menu').slideUp();
$('li i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left');
$('li.active').removeClass('active');
li.addClass('active');
$('.sub-menu', li).slideDown();
$('i', li).removeClass('glyphicon-chevron-left').addClass('glyphicon-chevron-down');
}
};
$('.sidebar > ul > li').click(function(ev) {
ev.stopPropagation();
toggleAccordion($(this));
});
$('.sidebar > ul > li > a').click(function(ev) {
ev.stopPropagation();
toggleAccordion($(this).parent());
});
I do want it to be collapsed when clicked on a list item that's been expanded.
And I want it clickable in the entire row.
If i make the click function to .sidebar ul li a it's working fine. But I'm able to click only on the text to get the accordion effect.
Please help me.

You were not stopping the propagation of click event from the sub items
$('.sidebar > ul > li').click(function (ev) {
toggleAccordion($(this));
}).find('ul').hide();
$('.sidebar li').click(function (e) {
e.stopPropagation()
});
Demo: Fiddle

Related

Dropdown menu using css/javascript not removing active dropdown

I have a dropdown menu that on click, displays a submenu of list items.
Everything works great except the PARENT 2 submenu, if active, does NOT turn off if I click on the PARENT 3 link with a dropdown.
$(function () {
$('nav ul li a:not(:only-child)').click(function (e) {
$(this).siblings('.nav-dropdown').toggle();
$('.dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function () {
$('.nav-dropdown').hide();
});
});
So if I click PARENT 2, the dropdown appears. If I then click PARENT 3, its dropdown also appears (and I need PARENT 2 dropdown to disappear). How to make sure that any menu item clicked removes any instance of an open submenu?
<nav>
<ul class="nav_links">
<li>Parent 1</li>
<li>Parent 2
<ul class="nav-dropdown">
<li>
Child 1
</li>
<li>
Child 2
</li>
</ul>
</li>
<li>Parent 3<i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
Child 1
</li>
<li>
Child 2
</li>
</ul>
</li>
<li>Parent 4</li>
</ul>
</nav>
Your problem was that there isn't any element with the class dropdown.
So $('.dropdown').not($(this).siblings()).hide(); didn't work.
Try this:
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul class="nav_links">
<li>Parent 1</li>
<li>Parent 2
<ul class="nav-dropdown">
<li>
Child 1
</li>
<li>
Child 2
</li>
</ul>
</li>
<li>Parent 3<i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
Child 1
</li>
<li>
Child 2
</li>
</ul>
</li>
<li>Parent 4</li>
</ul>
</nav>

How can I set conditional class on the selected element in react, toggle will not work

I have this dropdown menu, I want if my menu has arrow class before ul then If I click on that parent li menu it will add a class on that li which is showMenu only that sub-menu.
this is the code:
<ul className="nav-links" >
<li>
<a href="#">
<i className='bx bx-grid-alt'></i>
<span className="link_name">Dashboard</span>
</a>
<ul className="sub-menu blank">
<li><a className="link_name" href="#">Category</a></li>
</ul>
</li>
<li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}> // sub menu parent
<div className="iocn-link">
<a href="#">
<i className='bx bx-collection'></i>
<span className="link_name">Category</span>
</a>
<i className='bx bxs-chevron-down arrow'></i> // arrow class
</div>
<ul className="sub-menu">
<li><a className="link_name" href="#">Category</a></li>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>PHP & MySQL</li>
</ul>
</li>
<li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}>// sub menu parent
<div className="iocn-link">
<a href="#">
<i className='bx bx-book-alt'></i>
<span className="link_name">Posts</span>
</a>
<i className='bx bxs-chevron-down arrow'></i> // arrow class
</div>
<ul className="sub-menu">
<li><a className="link_name" href="#">Posts</a></li>
<li>Web Design</li>
<li>Login Form</li>
<li>Card Design</li>
</ul>
</li>
</ul>
I tried this way set on click handler subMenuToggle into the parent submenu li if anyone clicks on that li it will set true and It will add a class 'subMenu' but when I click any sub menu parent item it becomes true and opens all the sub-menus I have.
const [subMenu, setSubMenu] = useState(false)
const subMenuToggle = () => {
setSubMenu(!subMenu)
}
Can anyone help me please?
I think you are doing it wrong. you dont need that subMenu state, just use classList of the current target element that is clicked on.
const subMenuToggle = (e)=>{
e.currentTarget.classList.toggle('showMenu');
}
and your li should be like this:
/* you can provide any default className that
this element must have beside that showMenu that you provide dynamically
*/
<li onClick={subMenuToggle} className=""> // sub menu parent
<div className="iocn-link">
<a href="#">
<i className='bx bx-collection'></i>
<span className="link_name">Category</span>
</a>
<i className='bx bxs-chevron-down arrow'></i> // arrow class
</div>
<ul className="sub-menu">
<li><a className="link_name" href="#">Category</a></li>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>PHP & MySQL</li>
</ul>
</li>

jQuery issue with WordPress Sub Menu

Wondering if anyone can help, please.
I've got some jQuery setup for my sub-menu in WordPress. It works perfectly until I have a sub-menu within a sub-menu. The classes don't change in WordPress so the jQuery no longer works.
Here's my jQuery:
$('.mobile li > .sub-menu').parent().click(function() {
$(".sub-menu").slideUp();
var submenu = $(this).children('.sub-menu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
}
});
Here's an example of how WordPress outputs the menu code:
<ul id="menu-main-menu" class="mobile">
<li>
Item
<ul class="sub-menu">
<li>
Item
<ul class="sub-menu">
<li>
Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
Any ideas of how to amend my code? Currently when I click the item within the two sub-menu then the parent sub-menu closes.
Try with this simplified handler:
$('.mobile li > a').click(function() {
$(this).siblings('.sub-menu').slideToggle(200);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main-menu" class="mobile">
<li>
Item
<ul class="sub-menu">
<li>
Item
<ul class="sub-menu">
<li>
Item
</li>
</ul>
</li>
</ul>
</li>
</ul>

Make sub menus expandable using JavaScript

I am working on a navigation menu with nested sub menus. I was wondering if there is a way I can achieve the menus to be expandable when I click the parent menu item
This is my HTML code, as you guys can see I have 2 ng-repeat inside the parent menu item and another one if the sub menu item has one or more sub menus
<div id="sidebar-wrapper" ng-controller="navigationController" style="overflow-y: auto; margin-top:-20px;" class="hidden-print" ng-hide="hideSidebar()">
<nav role="navigation" class="navbar navbar-default navbar-bigfont" style="border-width: 0">
<ul class="nav nav-pills nav-stacked">
<li class="portal-text-19b" ng-repeat="item in newMenu" ng-class="{active: hightlight === item.title && item.path !== '#'}" ng-show="showItem(item.path, item.allowAll)">
<a style="text-transform: uppercase" href="{{item.path}}" ng-click="item.fn()">
<span class="{{item.icon}}"></span> {{item.title}}
<span style="font-size: 7px;" ng-if="item.childs" class="glyphicon glyphicon-play"></span>
</a>
<ul class="nav nav-pills nav-stacked">
<li style="list-style-type: none;" ng-repeat="child in item.childs" ng-class="{active: hightlight === child.title && child.path !== '#'}" ng-show="showItem(child.path, child.allowAll)">
<a href="{{child.path}}" ng-click="child.fn()">
<span class="{{child.icon}}"></span> {{child.title}}
</a>
<ul class="nav nav-pills nav-stacked">
<li style="list-style-type: none;" ng-repeat="child2 in child.childs" ng-class="{active: hightlight === child2.title && child2.path !== '#'}" ng-show="showItem(child2.path, child2.allowAll)">
<a href="{{child2.path}}" ng-click="child2.fn()">
<span class="{{child2.icon}}"></span> {{child2.title}}
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
You can simply set the inner ul elements as hidden, and then use the following code to show/hide them:
$("ul li").has("ul").click(function() {
$(this).find("ul").toggle();
});
This will toggle hiding and showing the sub ul elements on their parent li click.
Explanation:
It uses .has() method to attach the click event handler to only li having ul children, and .toggle() method to show/hide the child list of the clicked li element.
Demo:
This is a working Demo Snippet:
$("ul li").has("ul").click(function() {
$(this).find("ul").toggle();
});
ul li {
cursor: pointer;
}
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

add/remove active class for ul list with jquery?

I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?
HTML
<ul class="nav nav-list">
<li class='nav-header'>Test</li>
<li class="active">Page 1</li>
<li>Page 2</li>
<li><a href="page3.php">Page 3</li>
</ul>
jquery:
$('.nav-list').click(function() {
//console.log("Clicked");
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
this will point to the <ul> selected by .nav-list. You can use delegation instead!
$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
you can use siblings and removeClass method
$('.nav-link li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
Try this,
$('.nav-list li').click(function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
In your context $(this) will points to the UL element not the Li. Hence you are not getting the expected results.
I used this:
$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');
Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li>.
In my case I have div element with same class. Now I added the active class on it using jquery check the code.
div element
<div class="previewBox" id="first_div">
...
</div>
<div class="previewBox" id="second_div">
...
</div>
<div class="previewBox" id="third_div">
...
</div>
jquery code
$(".previewBox").click(function () {
$(".previewBox.active").removeClass('active')
$(this).addClass('active')
});
css
.active {
background-color:#e9f1f5;
border-left:4px solid #024a81;
}
Demo
click_this
$(document).ready(function(){
$('.cliked').click(function() {
$(".cliked").removeClass("liactive");
$(this).addClass("liactive");
});
});
.liactive {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul
className="sidebar-nav position-fixed "
style="height:450px;overflow:scroll"
>
<li>
<a className="cliked liactive" href="#">
check Kyc Status
</a>
</li>
<li>
<a className="cliked" href="#">
My Investments
</a>
</li>
<li>
<a className="cliked" href="#">
My SIP
</a>
</li>
<li>
<a className="cliked" href="#">
My Tax Savers Fund
</a>
</li>
<li>
<a className="cliked" href="#">
Transaction History
</a>
</li>
<li>
<a className="cliked" href="#">
Invest Now
</a>
</li>
<li>
<a className="cliked" href="#">
My Profile
</a>
</li>
<li>
<a className="cliked" href="#">
FAQ`s
</a>
</li>
<li>
<a className="cliked" href="#">
Suggestion Portfolio
</a>
</li>
<li>
<a className="cliked" href="#">
Bluk Lumpsum / Bulk SIP
</a>
</li>
</ul>;

Categories