closing the previous opened submenu when click on new one

April 7, 2022

I have a vertical menu with submenu. I want to close the the previous clocked menu when clicking the new one. I just could open it. but byt this code all of them stay open. how can I do that?

this is the HTML code

  <div class="sidebar ">
     <div class="menu-layout">
         <ul>
            <li class="sub-menu nav-item first-level">
               <a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span>&nbsp;<span class='fa fa-caret-down right'></span></a>
                   <ul>
                      <li class="second-level"><a href="~/admin/users/index">*&nbsp;Users List</a></li>
                            <li class="second-level"> <a href="~/admin/users/Create" class="menu-item">*&nbsp;Register New User *</a></li>
                        </ul>
                    </li>                       
                    <li class="sub-menu nav-item first-level">
                        <a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span>&nbsp;<span class='fa fa-caret-down right'></span></a>
                        <ul>
                            <li class="second-level"><a href="~/admin/categories/" class="menu-item">*&nbsp;Category List</a></li>
                            <li class="second-level"><a href="~/admin/categories/addnewcategory" class="menu-item">*&nbsp;New category</a></li>
                        </ul>
                    </li>
                    <li class="sub-menu nav-item first-level">
                        <a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span>&nbsp;<span class='fa fa-caret-down right'></span></a>
                        <ul>
                            <li class="second-level"><a href="~/admin/products/" class="menu-item">*&nbsp;Products List</a></li>
                            <li class="second-level"> <a href="~/admin/products/addnewproduct" class="menu-item">*&nbsp;New Product </a></li>
                        </ul>
                    </li>
                   <li class="sub-menu nav-item first-level">
                        <a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span>&nbsp;<span class='fa fa-caret-down right'></span></a>
                        <ul>
                            <li class="second-level"><a href="~/admin/Orders/" class="menu-item">*&nbsp;Orders List</a></li>
                            
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

This is js:

  <script>
    $('.sub-menu ul').hide();
    $(".sub-menu a").click(function () {
        $(this).parent(".sub-menu").children("ul").slideToggle("100");
        $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
    });
</script>

and this is CSS:

  .menu-layout .first-level {
    margin-bottom: 9px;
    border-radius: 5%;
    padding: 2px 10px 2px 10px;
    line-height: 15px;
}

.second-level {
    margin-bottom: 9px;       
    padding: 2px 50px 2px 10px;
    line-height: 15px;
}

    .menu-layout li a {
        color: white !important;
        font-size: 13px;
    }

        .menu-layout li a i {
            color: white;
            padding-left: 10px
        }


.sidebar {
    position: fixed;
    top: 1px;
    width: 250px;
    height: calc(100% - 1px);
    border-bottom-left-radius: 20px;
    transition: all 0.3s ease;
    background-color:black;
    font-family: IRANSans;
    font-weight: 400;
}

>Solution :

Here you go…

Just change this…

$(document).ready(function () {
    $(".sub-menu ul").hide();
    $(".sub-menu a").click(function () {
        $(this).parent(".sub-menu").children("ul").slideToggle("100");
        $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
    });
});

…to this.

$(document).ready(function () {
    $(".sub-menu ul").hide();
    $(".sub-menu a").click(function () {
        $(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
        $(this).parent(".sub-menu").children("ul").slideToggle("100");
        $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
    });
});

$(document).ready(function() {
  $(".sub-menu ul").hide();
  $(".sub-menu a").click(function() {
    $(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
    $(this).parent(".sub-menu").children("ul").slideToggle("100");
    $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
  });
});

.menu-layout .first-level {
  margin-bottom: 9px;
  border-radius: 5%;
  padding: 2px 10px 2px 10px;
  line-height: 15px;
}

.second-level {
  margin-bottom: 9px;
  padding: 2px 50px 2px 10px;
  line-height: 15px;
}

.menu-layout li a {
  color: white !important;
  font-size: 13px;
}

.menu-layout li a i {
  color: white;
  padding-left: 10px
}

.sidebar {
  position: fixed;
  top: 1px;
  width: 250px;
  height: calc(100% - 1px);
  border-bottom-left-radius: 20px;
  transition: all 0.3s ease;
  background-color: black;
  font-family: IRANSans;
  font-weight: 400;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

  <div class="sidebar ">
    <div class="menu-layout">
      <ul>
        <li class="sub-menu nav-item first-level">
          <a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span>&nbsp;<span class="fa fa-caret-down right"></span></a>
          <ul>
            <li class="second-level"><a href="~/admin/users/index">*&nbsp;Users List</a></li>
            <li class="second-level"> <a href="~/admin/users/Create" class="menu-item">*&nbsp;Register New User *</a></li>
          </ul>
        </li>
        <li class="sub-menu nav-item first-level">
          <a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span>&nbsp;<span class="fa fa-caret-down right"></span></a>
          <ul>
            <li class="second-level"><a href="~/admin/categories/" class="menu-item">*&nbsp;Category List</a></li>
            <li class="second-level"><a href="~/admin/categories/addnewcategory" class="menu-item">*&nbsp;New category</a></li>
          </ul>
        </li>
        <li class="sub-menu nav-item first-level">
          <a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span>&nbsp;<span class="fa fa-caret-down right"></span></a>
          <ul>
            <li class="second-level"><a href="~/admin/products/" class="menu-item">*&nbsp;Products List</a></li>
            <li class="second-level"> <a href="~/admin/products/addnewproduct" class="menu-item">*&nbsp;New Product </a></li>
          </ul>
        </li>
        <li class="sub-menu nav-item first-level">
          <a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span>&nbsp;<span class="fa fa-caret-down right"></span></a>
          <ul>
            <li class="second-level"><a href="~/admin/Orders/" class="menu-item">*&nbsp;Orders List</a></li>

          </ul>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>