Как соединить 2 collapse, bootstrap?

Question

[RodgerFox]

Для мобильной версии сайта вывод навигации и блока с корзиной вывожу при помощи кнопок с прикрученном collapse от бутстрапа.
Получается примерно:

<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>

Сейчас все работает, но как сделать, что бы один коллапс закрывался, если открываем другой? Понял, суть в data-parent но результата не принесло =\
Подскажите что еще добавить надо?

Answer 1

[holfza]

Полагаю, что data-parent нужно указывать с решеткой:
data-parent="#main-head"

UPD:

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

Comments

[RodgerFox]

ничего не изменилось

[holfza]

В документации написано, что есть зависимость от класса panel.

Ну и в data-parent решетку не забудьте.

Обновил ответ выше

[RodgerFox]

да да, все дело в классе panel , большое спасибо.