Hide Displayed Class and Show the Clicked One in jQuery

Question

I have 3 menu button and each has submenu. The submenus are hidden by default. When any of the menu is clicked, the submenu under it displays. This is working but if I click on the second or third button it displays its submenu and the submenu of the first one will still be showing. I want any displayed button to hide whenever any other one is clicked.

HTML Code:

<div class='mainMenu'>
<button class='menus'> aTone </button>
    <div class='sub'>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <button class='menus'> A1 </button>
                    <button class='menus'> B2 </button>
                    <button class='menus'> B3 </button>
                </div>
            </div>
        </div>
    </div>
<button class='menus'> bTone </button>
    <div class='sub'>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <button class='menus'> B1 </button>
                    <button class='menus'> B2 </button>
                    <button class='menus'> B3 </button>
                </div>
            </div>
        </div>
    </div>
<button class='menus'> ATone </button>
    <div class='sub'>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <button class='menus'> C1 </button>
                    <button class='menus'> C2 </button>
                    <button class='menus'> C3 </button>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery Code:

$('.sub').hide();
$(document).on('click', '.menus', function(){
    var $this = $(this);
    $this.next('.sub').slideToggle(400);
}); 

Thank you, in advance.

Answer 1

As you have your submenus inside .mainMenu div. Replaced $(document) with $('.mainMenu') . Because you're delegating events on children of the document object, so events bubble up to the document level. It's more convenient to select the closest parent $('.mainMenu') you have (and the parent must exist on the page at load). Try this:

$('.sub').hide();
$('.mainMenu').on('click', '.menus', function(){
    $('.sub').hide(); // this will hide all submenu's
    var $this = $(this);
    $this.next('.sub').slideToggle(400); // this will show submenu next to clicked button
});

DEMO

Answer 2

$(document).on('click', '.menus', function(){
var $this = $(this);
$('.sub').hide();
$this.next('.sub').slideToggle(400);
});