Collapse in bootstrap 4

Question

I wish that when I click on one of the menus Collapse the others hide and I’m not getting, I’m using the following code in jquery, I don’t know if it’s right:

$( ".card" ).on( "click", "#menu_arrow", function() {        
    $( "div[class|='collapse']" ).removeClass('show');
});

The menus are in a php loop that displays users along with this little menuzinho on the side of the name:

<div class="right-col col-lg-4 align-self-center align-items-center">
    <a data-toggle="collapse" data-parent="#accordion" id="menu_arrow" href="#collapse<?php echo $matricula['id']; ?>" aria-expanded="true" aria-controls="collapse<?php echo $matricula['id']; ?>">Menu de opções <i class="fa fa-caret-down" id="caret2" aria-hidden="true"></i></a>
    <div id="collapse<?php echo $matricula['id']; ?>" class="collapse hide" role="tabpanel" aria-labelledby="heading<?php echo $matricula['id']; ?>">
        <div class="opt"><a href="<?php echo $url_base . "/painel/editar_usuarios.php?id=" . $matricula['id']; ?>"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Editar cadastro</a></div>
        <div class="opt"><a href="#"><i class="fa fa-list-alt" aria-hidden="true"></i> Editar boletim</a></div>
        <div class="opt"><a href="#"><i class="fa fa-file-text" aria-hidden="true"></i> Imprimir histórico</a></div>
        <div class="opt"><a href="#"><i class="fa fa-file-text" aria-hidden="true"></i> Imprimir ficha</a></div>
        <div class="opt"><a href="#"><i class="fa fa-folder" aria-hidden="true"></i> Portifólio</a></div>
    </div>
</div>

Answer 1

For you to hide the menu by clicking on some option you can use the collapse("hide"), you must apply the action of click in all tags <a> that are within the divs with class collapse.

Your javascript function would look like this:

 $(".collapse a").click(function() {
       $(this).closest(".collapse").collapse("hide");
 });

Remembering that I made use of $(this).closest(".collapse") why it seems to me that you are generating the Divs with Collapse within a for and needed to be generic, otherwise it would be enough to make the call by id of the element.

Answer 2

I was able to solve using a jquery selector type, to select all elements with the class "menu_arrow_container" I created to identify where the menu is.

$(".menu_container a").click(function() {
   $('div[class*="menu_arrow_container"]').closest(".collapse").collapse("hide");
});