Collapse mother close the child Collapse also, but do not open together in bootstrap 4

Question

I have the following menu:

When I click on collapse mãe "Security":

Opened the collpase mãe and inside it is the collapse filho "Users", let’s click on collapse filho "Users":

So far everything is as I would like, if you click to close the collapse filho "Users" will close normally, until there is 100%.

But my problem is if I click on collapse mãe "Security", then will close only the collapse mãe "Security" and the collapse filho will remain open as follows:

How could I do when to click on collapse mãe "Security", also close the collapse filho "Users"?

Note that when you click to OPEN the collapse mãe "Security", the collapse filho "Users" is not allowed to open also, has to be as follows:

Codes from my menu:

<div class="sidenav">
    <div class="logo">
        <a href="home.php"><img src="img/store2.png"></a>
    </div>
    <ul class="menuVertical" id="accordion">
        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-1">
                <i class="fa fa-id-card"></i><span>Produtos<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-1" class="collapse" data-parent="#accordion">
                <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
            </ul>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-2">
                <i class="fa fa-wrench"></i><span>Parâmetros<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-2" class="collapse" data-parent="#accordion">
                <li><a href=""><i class="fa fa-search-minus"></i><span> Estoque Mínimo</span></a></li>
            </ul>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="">
                <i class="fa fa-list-ol"></i><span>Relatórios</span>
            </a>
        </li>

        <!--************************************************************************************-->

        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-3">
                <i class="fa fa-lock"></i><span>Segurança<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-3" class="collapse" data-parent="#accordion">
                <li><a href="#" data-toggle="collapse" data-target="#submenu-31"><i class="fa fa-user"></i><span> Usuários<i class="fa fa-angle-down float-right"></i></span></a></li>
            </ul>

            <div class="subsubmenu">
                <ul id="submenu-31" class="collapse">
                    <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                    <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                    <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
                </ul>
            </div>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="" data-toggle="modal" data-target="#deslogar">
                <i class="fa fa-sign-out-alt"></i><span>Sair</span>
            </a>
        </li>

        <!--************************************************************************************-->

    </ul>
</div>

Answer 1

Gabriel as you are using the standard Bootstrap JS think a CSS-only solution might suit you.

OBS: I had to remove the <div class="submenu"> and <div class="subsubmenu"> for the CSS rule to be used. But vc can create the classes of these Divs directly in the <ul> with the submenus

li.collapsed + ul {
  height: 0 !important;
}
li.collapsed + ul + ul.collapsed.collapse.in {
  display: none;
}

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <div class="sidenav">
    <div class="logo">
        <a href="home.php"><img src="img/store2.png"></a>
    </div>
    <ul class="menuVertical" id="accordion">
        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-1">
                <i class="fa fa-id-card"></i><span>Produtos<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-1" class="collapse" data-parent="#accordion">
                <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
            </ul>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-2">
                <i class="fa fa-wrench"></i><span>Parâmetros<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-2" class="collapse" data-parent="#accordion">
                <li><a href=""><i class="fa fa-search-minus"></i><span> Estoque Mínimo</span></a></li>
            </ul>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="">
                <i class="fa fa-list-ol"></i><span>Relatórios</span>
            </a>
        </li>

        <!--************************************************************************************-->

        <li data-toggle="collapse" data-target="#submenu-3">
            <a href="#">
                <i class="fa fa-lock"></i><span>Segurança<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        
            <ul id="submenu-3" class="collapse" data-toggle="collapse" data-target="#submenu-31" data-parent="#accordion">
                <li >
                  <a href="#" ><i class="fa fa-user"></i><span> Usuários<i class="fa fa-angle-down float-right"></i></span></a>
                </li>
            </ul>

            
                <ul id="submenu-31" class="collapse" data-toggle="collapse" data-parent="#accordion">
                    <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                    <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                    <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
                </ul>
            
        

        <!--************************************************************************************-->

        <li>
            <a href="" data-toggle="modal" data-target="#deslogar">
                <i class="fa fa-sign-out-alt"></i><span>Sair</span>
            </a>
        </li>

        <!--************************************************************************************-->

    </ul>
</div>

I believe that manipulating the original JS or creating a new Script you can also, but there can interfere in other components that use the Bootstrap Collapse system.

Answer 2

"I could" do it this way:

<li>
    <a href="#" data-toggle="collapse" data-target="#submenu-3">
        <i class="fa fa-lock"></i><span>Segurança<i class="fa fa-angle-down float-right"></i></span>
    </a>
</li>
<div class="submenu">
    <ul id="submenu-3" class="collapse" data-parent="#accordion">
        <li><a href="#" data-toggle="collapse" data-target="#submenu-31"><i class="fa fa-user"></i><span> Usuários<i class="fa fa-angle-down float-right"></i></span></a></li>
        <div class="subsubmenu">
            <ul id="submenu-31" class="collapse">
                <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
            </ul>
        </div>
    </ul>           
</div>

I put the <div class="subsubmenu"> that contain the collapse filho "Users" within the <div class="submenu"> and also within the <ul id="submenu-3" class="collapse" data-parent="#accordion">, thus, when you click to close the collapse mãe "Security", will close it whole, the collapse filho "Users" will not close, but will "disappear", since the collapse mãe "Security" will be closed.