All sub menus are displayed at once when any button that triggers the event is clicked.
For a live demonstration, click here:
https://jsfiddle.net/saidmontiel/734szqLg/9/
I'm interested in having only one submenu appear at a time.
I am aware that there are plenty of resources available to fix this issue with just copying and pasting code snippets. However, I prefer to learn the solution myself. So, a big thanks in advance to those who will assist me in my learning process.
// Mobile Navigation Scripts
var menuButton = $('.menu-toggle');
var navul = $('.nav-container');
var siteContent = $('#content');
$('.menu-item-has-children').prepend('<button class="sub-menu-btn" aria-controls="submenu" aria-expanded="false"><img width="10px" height="10px" src="http://cdn.mysitemyway.com/icons-watermarks/flat-square-white-on-black/classic-arrows/classic-arrows_double-chevron-down/classic-arrows_double-chevron-down_flat-square-white-on-black_512x512.png"></button>');
menuButton.click(function () {
if ($(this).attr("aria-expanded") === "false") {
navul.toggleClass("menu-opened");
siteContent.addClass('offCanvas').removeClass('onCanvas');
$(this).attr("aria-expanded", "true");
} else {
navul.removeClass("menu-opened");
siteContent.addClass('onCanvas').removeClass('offCanvas');
$(this).attr("aria-expanded", "false");
}
});
var subMenuBtn = $('.sub-menu-btn');
var subMenu = $('.sub-menu');
var hasChildren = $('menu-item-has-children');
subMenuBtn.click(function () {
if ($(this).attr("aria-expanded") === "false") {
subMenu.closest('ul').slideToggle().toggleClass('submenu-opened');
$(this).attr("aria-expanded", "true");
} else {
subMenu.slideToggle().removeClass('submenu-opened');
$(this).attr("aria-expanded", "false");
}
});body {
background-image: url('https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg');
background-repeat:repeat;
}
.menu-toggle {
display: block;
background-size: 30px 50px;
background-repeat: no-repeat;
background-position: 97%;
background-color: #000;
height: 50px;
width: 100%;
border: 0;
border-radius: 0;
box-shadow: initial;
text-shadow: initial; }
...
...
</li>
<li>
...
</ul></div>