How to connect 2 collapse, bootstrap?

Question

Bootstrap

For the mobile version of the site, the output of the navigation and the block with the basket is displayed using the buttons with the screwed collapse from the bootstrap.
It turns out approximately:

<header id="main-head" class="hed">
......
  <!-- кнопка открытия корзины -->
  <button id="mini-cart" class="btn btn-default navbar-toggle collapsed" type="button" 
      data-toggle="collapse" data-target="#list-cart" data-parent="main-head" aria-expanded="false" aria-controls="list-cart"><i class="icon"></i> Корзина</button> 
  <!-- кнопка открытия навигации -->
  <button id="mb-open" class="visible-xs-inline-block btn btn-default navbar-toggle collapsed" type="button" 
      data-toggle="collapse" data-target="#main-menu" data-parent="main-head" aria-controls="main-menu"><i></i> <span>Меню</span></button>
    <!-- сама навигация -->
    <nav id="main-menu" class="navbar-collapse">.....</nav>
    <!-- блок с корзинкой -->
    <ul id="list-cart" class="navbar-collapse">....</ul>
....
</header>

Now everything works, but how to make one collapse close if we open another one? Understood, the essence is in data-parent, but it did not bring any result = \
Tell me what else should I add?

Answer 1

I believe that data-parent should be specified with a hash:
UPD:

<header id="main-head" class="hed">
   <div class="panel">
      ...
   </div>
</header>