Boot accordion / collector does not work with ul / li navigation

Question

I use the latest download and the accordion does not work at all. I mean, when I open Test 1 with the nested 'ul', it switches, but then when I click on Test 2 with another nested 'ul', it also switches, but without closing the test 1 ...

Can anybody help me? It seems like it will not work with 'ul' and 'li' (without panel class).

Thanks in advance.

ps Here is the complete code for my accordion attempt. Everything works, except for automatically closing the previous open.

http://jsbin.com/OKOjUlu/1/edit?html,output

<div class="row"> <div class="page-header"> <h3>Proizvodi</h3> </div> <div class="col-md-3"> <ul class="nav nav-stacked" id="accordion1"> <li> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a> <ul id="firstLink" class="collapse"> <li>SubTest1</li> <li>SubTest1</li> <li>SubTest1</li> </ul> </li> <li> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a> <ul id="secondLink" class="collapse"> <li>SubTest2</li> <li>SubTest2</li> <li>SubTest2</li> <li>SubTest2</li> </ul> </li> <li><a href="#">Test1</a> </li> <li><a href="#">Test1</a> </li> </ul> </div> <div class="col-md-9"></div> </div> 

Answer 1

Bootstrap basically succeeds in adding / removing CSS classes and its rules. Thus, the structure must be the same so that the effect is the same as that of the div. What you missed was <li class="panel"> on the li sheet that contains the trigger and its corresponding menu. And in your case, you were absent.

BS Code:

 //In the below line this is supposed to fetch the active elements //but in your case it did not match anything hence it failed to fetch active elements to make it inactive. var actives = this.$parent && this.$parent.find('> .panel > .in') if (actives && actives.length) { var hasData = actives.data('bs.collapse') if (hasData && hasData.transitioning) return actives.collapse('hide') hasData || actives.data('bs.collapse', null) } 

So try:

  <ul class="nav nav-stacked" id="accordion1"> <li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a> <ul id="firstLink" class="collapse panel-collapse in"> <li>SubTest1</li> <li>SubTest1</li> <li>SubTest1</li> </ul> </li> <li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a> <ul id="secondLink" class="collapse panel-collapse"> <li>SubTest2</li> <li>SubTest2</li> <li>SubTest2</li> <li>SubTest2</li> </ul> </li> </ul> 

And since it was intended to be used with a div , you will have to redefine some rules specifically for li , as shown below.

 #accordion1 li.panel{ margin-bottom: 0px; } 

Demo

Answer 2

Try the following:

script:

 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="../js/bootstrap.min.js"></script> 

HTML:

 <div class="bs-example"> <div id="myAccordion" class="accordion"> <div class="accordion-group"> <div class="accordion-heading"> <a href="#collapseOne" data-parent="#myAccordion" data-toggle="collapse" class="accordion-toggle">Test12</a> </div> <div class="accordion-body collapse" id="collapseOne"> <div class="accordion-inner"> <ul> <li>SubTest1</li> <li>SubTest1</li> <li>SubTest1</li> </ul> </div> </div> </div> </div> </div> 

Check here: Demo