Twitter bootstrap : Accordion issue

Question

I have been trying to implement an accordion menu using twitter and following the example , also spent my day googling but no fix so far.

Basically I have a weird behaviour while clicking on the menu items :

• clicking on the item A and then the item B result in leaving the item A still open - the same happens by clicking on other items - all of them remain opened

  • once i click on a menu, it shows the submenu and if I click on the submenu item, it doesn't open the related page (using the href content) while close the current item instead

here is the code :

<div class="panel-heading"></div>

<li class="list-group-item accordion-toggle" data-target="#elementOne" data-toggle="collapse" data-parent="#accordion">
  <a class="accordion-toggle">Test 1</a>
<div id="elementOne" class="collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <a href="some_url.html">link1</a> 
    </li>
  </ul>
</div>
</li>


<li class="list-group-item accordion-toggle" data-target="#elementTwo" data-toggle="collapse" data-parent="#accordion">
  <a class="accordion-toggle">Test 2</a>
<div id="elementTwo" class="collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <a href="some_url.html">link2</a> 
    </li>
  </ul>
</div>
</li>

pls help !!

Answer 1

There is a Bootstrap "issue" where the data-parent is dependent on the panel class:

https://github.com/twbs/bootstrap/pull/11191

So you could get it work be adding the panel class to each item..

http://www.bootply.com/117663

or there may be some jquery workaround as well.