Submenus display all at once

Question

The sub menus all show up when clicking any of the button that triggers the event.

Here's a working example:

https://jsfiddle.net/saidmontiel/734szqLg/9/

I only want each one to pop out at once.

I know there must be a lot of resources that will fix this for me, just copying and pasting, but I actually want to learn. so I thank in advance those who will help my education.

 // Mobile Nav 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; } .menu-toggle:hover, .menu-toggle:focus { box-shadow: initial; text-shadow: initial; } .menu-toggle img { height: 30px; width: auto; margin: 0; } #content { margin-top: 50px; } .menu-open { left: 25%; } .menu-opened { left: 25% !important; } .nav-container { left: 100%; width: 75%; background-color: #323232; height: 100vh; overflow-y: scroll; position: relative; -moz-transition-duration: 0.3s, 0.5s; -o-transition-duration: 0.3s, 0.5s; -webkit-transition-duration: 0.3s, 0.5s; transition-duration: 0.3s, 0.5s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -moz-transition-property: left, opacity, box-shadow; -o-transition-property: left, opacity, box-shadow; -webkit-transition-property: left, opacity, box-shadow; transition-property: left, opacity, box-shadow; } #content { -moz-transition-duration: 0.3s, 0.5s; -o-transition-duration: 0.3s, 0.5s; -webkit-transition-duration: 0.3s, 0.5s; transition-duration: 0.3s, 0.5s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -moz-transition-property: left, opacity, box-shadow; -o-transition-property: left, opacity, box-shadow; -webkit-transition-property: left, opacity, box-shadow; transition-property: left, opacity, box-shadow; position: relative; } .onCanvas { left: 0; } .offCanvas { left: -75%; opacity: .25; } .current-menu-item { background-color: #3F3F3F !important; } .sub-menu-btn { padding: 10px; float: right; border: 0; background: #3c3c3c; box-shadow: initial; text-shadow: initial; border-radius: 0; margin: 8px; color: #fff; } .sub-menu-btn a { color: #00cfd3; text-decoration: none; border-bottom: 1px solid #00cfd3; border-top: 1px solid #00cfd3; } .sub-menu-btn a:hover, .sub-menu-btn a:visited { color: #fff; } .sub-menu-btn a:visited, .sub-menu-btn a:active { color: #939598; border-bottom: 1px solid #939598; border-top: 1px solid #939598; } .main-navigation { position: fixed; width: 100%; z-index: 99; background-color: #000; } .main-navigation { height: 50px; } .main-navigation a { color: #fff; text-decoration: none; border: 0; display: block; text-align: right; margin-right: 40px; padding-right: 15px; } .main-navigation a:hover, .main-navigation a:focus { color: #fff; border: 0; text-decoration: none; } .main-navigation ul { margin: 0; list-style: none; padding: 0; } .main-navigation ul ul { display: none; } .main-navigation li { float: none; background-color: #323232; border-bottom: 1px solid #000; line-height: 50px; } .main-navigation li li { border: 0; margin: 0; background-color: #404040; border-bottom: 2px solid #4b4b4c; } .main-navigation li li a { margin-left: 5px; } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } .blackout { opacity: .2; background-color: #000; } .headerLogo { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"> <img src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/06_menu_stack-512.png" class="menuBurger"> </button> <div id="nav-wrap" class="nav-container"> <ul id="primary-menu" class="menu"> <li> <a href="">Home</a></li> <li class="menu-item-has-children"><a href="#">Concerts &amp; Events</a> <ul class="sub-menu" style="display: none;"> <li><a href="#">Concerts</a></li> <li><a href="#">Featured artists:</a></li> <li><a href="#">Press</a></li> </ul> </li> <li class="menu-item-has-children"><a href="#">About</a> <ul class="sub-menu" style="display: none;"> <li><a href="#">History</a></li> <li><a href="#">Music Director</a></li> <li><a href="#">Board of Directors</a></li> <li><a href="#">Staff</a></li> <li class="menu-item-has-children "><a href="#">Orchestra</a> <ul class="sub-menu" style="display: none;"> <li><a href="about/league/">League</a></li> </ul> </li> </ul> </li> <li class="menu-item-has-children"><a href="#">Education</a> <ul class="sub-menu" style="display: none;"> <li><a href="#">Youth Concerts</a></li> <li><a href="#">Youth Orchestras</a></li> <li><a href="#">EarliStrings</a></li> <li><a href="#">Youth at Concerts</a></li> </ul> </li> <li><a href="give/">Give</a> <ul class="sub-menu" style="display: none;"> <li><a href="#">Donate</a></li> <li><a href="#">Business Sponsorships</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Adopt a Musician</a></li> <li><a href="#">Volunteer</a></li> <li><a href="#">Planned Giving</a></li> </ul> </li> <li class="menu-item-has-children"><a href="#">Buy Tickets</a> <ul class="sub-menu" style="display: none;"> <li><a href="#">Individual Concert Tickets</a></li> <li><a href="#">Season Tickets</a></li> <li><a href="#">Compose a Package</a></li> <li><a href="#">2016-17 Season Brochure</a></li> </ul> </li> </ul></div> </nav> 

Answer 1

Toggle the menus relative to the button clicked

 subMenuBtn.click(function () {
        var parent = $(this).parent()
        if ($(this).attr("aria-expanded") === "false") {
           parent.find('> ul').slideToggle().toggleClass('submenu-opened');//open the current one
           parent.siblings().find('ul').slideUp().removeClass('submenu-opened');/close all other on the same level
            $(this).attr("aria-expanded", "true");/

        } else {
            parent.find('> ul').slideToggle().removeClass('submenu-opened');
            parent.siblings().find('ul').slideUp().removeClass('submenu-opened');
            $(this).attr("aria-expanded", "false");
        }
    });

demo: https://jsfiddle.net/uwn9ehmz/1/