jQuery Sidebar - Show submenu div and hide all others with same class on button click

Question

JSFiddle: https://jsfiddle.net/02eaovq3/1/ .

How can I make this so that when the button is clicked to open a submenu, this appears but all others are hidden?

I've tried just adding hide() to all .submenu items, but obviously this creates a conflict which prevents all of them from being opened.

HTML:

<div id="sidebarPrimary">

        <ul id="sidebarPrimaryNav">

            <li class="navButton"><a href="#" target="blank_">JA</a></li>

            <li id="homeButton" class="navButton active"><a href="index.html">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-home"></span>Home

                </div>

            </a></li>

            <li id="personalButton" class="navButton" show-id="personalMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-user"></span>Personal

                </div>

            </a></li>

            <li id="companyButton" class="navButton" show-id="companyMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-briefcase"></span>Company

                </div>

            </a></li>

            <li id="invoicesButton" class="navButton" show-id="invoicesMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-gbp"></span>Invoices

                </div>

            </a></li>

            <li id="contactsButton" class="navButton" show-id="contactsMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-address-book"></span>Contacts

                </div>

            </a></li>

            <li id="expensesButton" class="navButton" show-id="expensesMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-minus"></span>Expenses

                </div>

            </a></li>

            <li id="payslipsButton" class="navButton" show-id="payslipsMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-list"></span>Payslips

                </div>

            </a></li>

        </ul>

    </div>

    <div id="personalMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">My Money</a></li>

            <li class="navButtonSub"><a href="#">My Details</a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Admin Details</a></li>

            <li class="navButtonSub"><a href="#">Contracts<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Dividends<span>2</span></a></li>

            <li class="navButtonSub"><a href="#">Timesheets<span>2</span></a></li>

            <li class="navButtonSub"><a href="#">Documents<span>2</span></a></li>

        </ul>

    </div>

    <div id="companyMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">Tax Settings</a></li>

            <li class="navButtonSub"><a href="#">Shareholders<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Company Warnings<span>6</span></a></li>

        </ul>

    </div>

    <div id="invoicesMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Create New Invoice</a></li>

            <li class="navButtonSub"><a href="#">List of Invoices<span>48</span></a></li>

        </ul>

    </div>

    <div id="contactsMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Create New Contact</a></li>

            <li class="navButtonSub"><a href="#">List of Contacts<span>50</span></a></li>

        </ul>

    </div>

    <div id="expensesMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Create New Expense</a></li>

            <li class="navButtonSub"><a href="#">List of Expenses<span>30</span></a></li>

        </ul>

    </div>

    <div id="payslipsMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Create New Payslip</a></li>

            <li class="navButtonSub"><a href="#">List of Payslips<span>13</span></a></li>

        </ul>

    </div>

    <main>

        <div id="topnav">

            <div id="topnavLeft">

                <a class="button" href="#"><span class="fa fa-plus"></span>New Invoice</a>

            </div>

            <ul>

                <li class="navButton"><a href="#"><span class="fa fa-lg fa-sign-out"></span></a></li>

                <li class="navButton"><a href="#"><span class="fa fa-lg fa-question"></span></a></li>

                <li class="navButton"><a href="#"><span class="fa fa-lg fa-cog"></span></a></li>

            </ul>

        </div>

        <div id="mainContent">



        </div>

    </main>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="js/menu.js"></script>

JS:

$(document).ready(function() {

$('.navButton').click(function() {

    $('#'+$(this).attr('show-id')).toggleClass('open');

});

})

Answer 1

All you need is to remove open class attribute of all siblings elements:

$('#'+$(this).attr('show-id')).siblings().removeClass('open');

Fiddle

Answer 2

$(document).ready(function() {

    $('.navButton').click(function() {

        $('.submenu').removeClass('open');
        $('#' + $(this).attr('show-id')).addClass('open');

    });

});

https://jsfiddle.net/02eaovq3/3/

But better to do that navigation with submenu inside parent menu container. If you don't know how to do it - ask in comment and I'll help you. Also, for container control you can set id in href - that would be better for SEO