bootstrap: создание sidebar-nav, действующего как Accordion, сворачивает все при открытии нового

Question

Это может быть очень простой проблемой для некоторых из вас, однако я не могу понять, как я могу заставить все sidebar-nav рушиться, когда я нажмите на новый, чтобы только один раз расширялся за раз. (на самом деле я должен повторить поведение аккордеона)

это чистый бутстрап. Я полагаю, CSS может справиться с этим хорошо, в противном случае я готов использовать jQuery, чтобы свернуть все как-то, и после этого открыть только щелкнув вкладку.

спасибо большое!

<!-- 1st side bar nav --> 
<ul id="sidebar-nav" class="sidebar-nav margin-bottom-30px"> 
    <li class="list-group-item has-submenu"> 
     <a href="#" align="center" class="submenu-toggle" data-toggle="collapse" data-parent="sidebar-nav"><i class="fa fa-home"></i> TEXT </a> 
     <ul id="ID1" class="list-unstyled collapse submenu "> 
      <li> 
       some list 
      </li> 
      <li> 
       some list. 
      </li> 
      <li> 
       some list 
      </li> 
      <li> 
       some list. 
      </li> 
     </ul> 
    </li>  
</ul> 

<!-- 2nd side bar nav --> 
<ul id="sidebar-nav" class="sidebar-nav margin-bottom-30px"> 
    <li class="list-group-item has-submenu"> 
     <a href="#" align="center" class="submenu-toggle" data-toggle="collapse" data-parent="sidebar-nav"><i class="fa fa-home"></i> TEXT </a> 
     <ul id="ID2" class="list-unstyled collapse submenu "> 
      <li> 
       some list 
      </li> 
      <li> 
       some list. 
      </li> 
      <li> 
       some list 
      </li> 
      <li> 
       some list. 
      </li> 
     </ul> 
    </li>  
</ul> 

some listsome list. 

<!-- 20th side bar nav --> 
<ul id="sidebar-nav" class="sidebar-nav margin-bottom-30px"> 
    <li class="list-group-item has-submenu"> 
     <a href="#" align="center" class="submenu-toggle" data-toggle="collapse" data-parent="sidebar-nav"><i class="fa fa-home"></i> TEXT </a> 
     <ul id="ID3" class="list-unstyled collapse submenu "> 
      <li> 
       some list 
      </li> 
      <li> 
       some list. 
      </li> 
      <li> 
       some list 
      </li> 
      <li> 
       some list. 
      </li> 
     </ul> 
    </li>  
</ul> 

Answer 1

попробовать это

$('.sidebar-nav').on('click', function() { 
    $(this).animate({ 
    width: '400px' 
    }, slow); 

    $(this).siblings('.sidebar-nav').animate({ 
    width: '0px' 
    }, slow, function() { $(this).fadeOut(); }); 
});