javascript - Collapse other panel when one is clicked within a foreach loop

Question

I am having issues with a list of menus clicking and hiding other panels when one is clicked and active.

    @{int i = 0;}
    @foreach (var levelOne in Model.MenuLevelOne)
    {
     <div class="panel-group" id="accordion_@i">
      <div class="panel panel-default" id="panel_@i">
       <div class="panel-heading">
        <h4 class="panel-title">
     <a onclick="leveltwo('@levelOne.MenuLevel')" data-toggle="collapse" data-target="#collapseOne_@i" href="#collapseOne_@i">@levelOne.MenuLevel</a>
        </h4>
       </div>
      <div id="collapseOne_@i" class="panel-collapse collapse in">
     <div class="panel-body">                                                                               
      <ul class="" id="[email protected]"></ul><ul class="filter-categories__list"></ul>
     </div>
        </div>
        </div>
    </div>
     i++;
     }

This will bring a list of Menus so like this with its sub menus :

Fruit

   Apple

   Pear

   Grape

Veg

   Carrot

   Cucumber

   Beetroot

Other

   Cake

   Chocalte

All these are collapsed on page load which is fine and working,

Shows as :

 Fruit

 Veg

 Other

however, when I open one and then open another one they should close.

So for example if I open Fruit, and then I open Veg. Fruit should close and Veg should open.

 Fruit

       Apple

       Pear

       Grape

 Veg

 Other

This should now open like this like but it is not working.

 Fruit


 Veg

       Carrot

       Cucumber

       Beetroot

 Other

Both of them stay open. How can I keep one open then close the rest?

Can someone tell me where I am wrong in the code?

Thanks

New error:

Answer 1

You need to add a function to close opened tabs each time one open:

$(document).ready(function () { 
        $('.collapse').on('show.bs.collapse', function () { //Triggered everytime the collapse is show
            $('.collapse.in').each(function () { //select current collapsed (some versions could be .show instead of .in
                $(this).collapse('hide'); //hide previously collapsed
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-group" id="accordion_0">
    <div class="panel panel-default" id="panel_0">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_0" href="#collapseOne_0">1</a>
            </h4>
        </div>
        <div id="collapseOne_0" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-1">
                    <li>Nível 1 - Item 1</li>
                    <li>Nível 1 - Item 2</li>
                    <li>Nível 1 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 1 - Filtro 1</li>
                    <li>Nível 1 - Filtro 2</li>
                    <li>Nível 1 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion_1">
    <div class="panel panel-default" id="panel_1">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_1" href="#collapseOne_1">2</a>
            </h4>
        </div>
        <div id="collapseOne_1" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-2">
                    <li>Nível 2 - Item 1</li>
                    <li>Nível 2 - Item 2</li>
                    <li>Nível 2 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 2 - Filtro 1</li>
                    <li>Nível 2 - Filtro 2</li>
                    <li>Nível 2 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion_2">
    <div class="panel panel-default" id="panel_2">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_2" href="#collapseOne_2">3</a>
            </h4>
        </div>
        <div id="collapseOne_2" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-3">
                    <li>Nível 3 - Item 1</li>
                    <li>Nível 3 - Item 2</li>
                    <li>Nível 3 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 3 - Filtro 1</li>
                    <li>Nível 3 - Filtro 2</li>
                    <li>Nível 3 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>