make this side navigation show one sub menu at a time?-CodePudding

I made a side navigation with two menus, each has a submenu button, which when clicked will reveal it's submenu.

Currently, a submenu opens or closes when you click on it.

--------------------------------------- What I want to achieve ---------------------------------------

I want just one submenu to be open at a time. That is, if a submenu is already open and the user clicks on another submenu button, the initial one closes, while the current one opens.

const sub_menu = document.querySelectorAll('.sub_menu');
sub_menu.forEach((item) => {
    const subMenuHeader = item.querySelector('.sub_menu_header')
    const subMenuBody = item.querySelector('.sub_menu_body')
    subMenuHeader.addEventListener('click', () => {
        if (!subMenuBody.classList.contains('active')) {
            subMenuBody.classList.add('active');
        } else {
            subMenuBody.classList.remove('active');
        }
    })
})

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body{
    font-family: 'Ebrima';
    background-color: #444444;
}



nav#nav_menu_query_off{
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #222222;
    overflow: auto;
    z-index: 2;
    padding: 20px 0 20px 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header{
    text-transform: uppercase;
    padding-bottom: 10px;
}
nav#nav_menu_query_off menu li{
    color: #f0f0f0;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:last-child){
    padding-bottom: 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child){
    padding-top: 20px;
}
nav#nav_menu_query_off menu#main_menu div.menu_body{
    padding: 0px 0 0 20px;
    border-left: 1px solid #efefef;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu{
    padding: 10px 0px;
    border-bottom: 1px solid #efefef;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_header{
    text-transform: capitalize;
    font-size: 14px;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_header:hover{
    cursor: pointer;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_body{
    padding: 5px 0 0 0px;
    /* THIS HIDES ALL SUBMENUS */
    display: none;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_body.active{
    display: block;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_body menu.sub_menu div.sub_menu_body li.inner_list_item{
    font-size: 14px;
}

nav#nav_menu_query_off menu li .menu_body menu li a{
    color: #f0f0f0;
    display: block;
    padding: 5px 0 5px 20px;
}
nav#nav_menu_query_off menu li .menu_body menu li a:hover{
    background-color: #999999;
}

nav::-webkit-scrollbar{
    /* width: 4px; */
    /* helps remove scrollbar which resizes or shifts list items */
    display: none;
}

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>side nav</title>
</head>

<body>
    <nav id="nav_menu_query_off">
        <menu id="main_menu">
            <li >
                <div >menu one</div>
                <div >
                    <menu >
                        <div >sub menu one</div>
                        <div >
                            <li ><a href="">link one</a></li>
                            <li ><a href="">link two</a></li>
                            <li ><a href="">link three</a></li>
                            <li ><a href="">link four</a></li>
                            <li ><a href="">link five</a></li>
                            <li ><a href="">link six</a></li>
                            <li ><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu >
                        <div >sub menu two</div>
                        <div >
                            <li ><a href="">link one</a></li>
                            <li ><a href="">link two</a></li>
                            <li ><a href="">link three</a></li>
                            <li ><a href="">link four</a></li>
                            <li ><a href="">link five</a></li>
                            <li ><a href="">link six</a></li>
                            <li ><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu >
                        <div >sub menu three</div>
                        <div >
                            <li ><a href="">link one</a></li>
                            <li ><a href="">link two</a></li>
                            <li ><a href="">link three</a></li>
                            <li ><a href="">link four</a></li>
                            <li ><a href="">link five</a></li>
                            <li ><a href="">link six</a></li>
                            <li ><a href="">link seven</a></li>
                        </div>
                    </menu>
                </div>
            </li>
            <li >
                <div >menu two</div>
                <div >
                    <menu >
                        <div >sub menu one</div>
                        <div >
                            <li ><a href="">link one</a></li>
                            <li ><a href="">link two</a></li>
                            <li ><a href="">link three</a></li>
                            <li ><a href="">link four</a></li>
                            <li ><a href="">link five</a></li>
                            <li ><a href="">link six</a></li>
                            <li ><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu >
                        <div >sub menu two</div>
                        <div >
                            <li ><a href="">link one</a></li>
                            <li ><a href="">link two</a></li>
                            <li ><a href="">link three</a></li>
                            <li ><a href="">link four</a></li>
                            <li ><a href="">link five</a></li>
                            <li ><a href="">link six</a></li>
                            <li ><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu >
                        <div >sub menu three</div>
                        <div >
                            <li ><a href="">link one</a></li>
                            <li ><a href="">link two</a></li>
                            <li ><a href="">link three</a></li>
                            <li ><a href="">link four</a></li>
                            <li ><a href="">link five</a></li>
                            <li ><a href="">link six</a></li>
                            <li ><a href="">link seven</a></li>
                        </div>
                    </menu>
                </div>
            </li>
        </menu>
    </nav>
</body>

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

Please, help me achieve this feature.

CodePudding user response：

Before you toggle class remove class of previous element.

if(document.querySelector(".sub_menu_body.active")) {
  document.querySelector(".sub_menu_body.active").classList.remove("active");
}

Here is your code https://jsbin.com/nafiboz/edit?html,css,js,output