Reputation: 221
I am looking to create the functionality when the user selects an accordion menu it opens that one and closes others.
At the moment I have the functionality that it removes the class if the user selects the top level of the currently opened menu.
But I have been trying to add in the close all others functionality. I realise this has been asked before and I have tried to implement the other very good suggestions that get the reuslts I need. However, I am struggling to match them with the structure I have. Also, my jQuery knowledge is weak at this time.
Does anyone have any suggestions? I am going round in circles at this time.
I have the following structure. I have no real control over this as it is a WP, pre-built, template project that I have inheritied and trying to shoehorn functionality - (simplified structure for ease)
$(document).ready(function() {
$('.sidebar .menu-item-has-children').click(function(e) {
$(this).toggleClass('sub-menu-open');
});
$('.sidebar .menu-item-has-children ul li a').click(function(e) {
e.stopPropagation();
});
if ($('ul.sub-menu').find('li.current-menu-item').length !== 0) {
$('li.current-menu-item').closest('.sidebar .menu-item-has-children').addClass('sub-menu-open');
}
});
.sub-menu {
display: none;
}
.sub-menu-open .sub-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id"sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
<div class="widget widget_nav_menu">
<div class="menu-employ-an-apprentice-accordion-container">
<ul id="menu-employ-an-apprentice-accordion">
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 1 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 2 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 3 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 4 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 5 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
Upvotes: 0
Views: 63
Reputation: 3922
just replace your jquery code
$('.sidebar .menu-item-has-children').click(function(e) {
$('.sidebar .menu-item-has-children').removeClass('sub-menu-open')
$(this).addClass('sub-menu-open');
});
you can view here
Upvotes: 1
Reputation: 9634
Simply add/remove classes this way:
$(document).ready(function() {
var allSubmenus = $('.sidebar .menu-item-has-children');
allSubmenus.click(function(e) {
var thisSubmenu = $(this);
if (thisSubmenu.hasClass('sub-menu-open')) {
thisSubmenu.removeClass('sub-menu-open');
} else {
allSubmenus.removeClass('sub-menu-open');
thisSubmenu.addClass('sub-menu-open');
};
});
});
.sub-menu {
display: none;
}
.sub-menu-open .sub-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside id "sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
<div class="widget widget_nav_menu">
<div class="menu-employ-an-apprentice-accordion-container">
<ul id="menu-employ-an-apprentice-accordion">
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 1 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 2 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 3 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 4 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 5 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
Upvotes: 2
Reputation: 337560
To close other menus when another is opened you can select all open instances using the .sub-menu-open
class, then just remove that class from them:
$(document).ready(function() {
$('.sidebar .menu-item-has-children').click(function(e) {
$('.sub-menu-open').not(this).removeClass('sub-menu-open'); // add this line
$(this).toggleClass('sub-menu-open');
});
$('.sidebar .menu-item-has-children ul li a').click(function(e) {
e.stopPropagation();
});
if ($('ul.sub-menu').find('li.current-menu-item').length !== 0) {
$('li.current-menu-item').closest('.sidebar .menu-item-has-children').addClass('sub-menu-open');
}
});
.sub-menu {
display: none;
}
.sub-menu-open .sub-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id"sidebar" class="sidebar fusion-widget-area fusion-content-widget-area fusion-sidebar-left fusion-employanapprentice-accordionmenu fusion-sticky-sidebar">
<div class="widget widget_nav_menu">
<div class="menu-employ-an-apprentice-accordion-container">
<ul id="menu-employ-an-apprentice-accordion">
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 1 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 2 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 3 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">Link 4 - No sub menu</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Link 5 - Has Sub menu</a>
<ul class="sub-menu">
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Links</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
Upvotes: 1