Bootstrap accordion/collapsible not working with ul/li navigation

Question

Im using latest bootstrap, and accordion is not working at all.. I mean, when i open Test 1 with nested 'ul', it toggles, but then when i click on test 2 with another nested 'ul', it toggles also,but without closing test 1...

Any one can help me ? It looks like it wont work with 'ul' and 'li' (without panel class).

Thanks in advance.

p.s. Here is the complete code of my accordion try.. Everything is working except auto closing previous opened.

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 mostly thrives on adding/removing css classes and its rules. So the structure needs to be the same for it to have the effect to happen same as that of div. What you missed was <li class="panel"> on the leaf li's that holds the trigger and its respective menu. And in your case you were missing them.

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 this was designed to be used with div you will have to override some rules specifically for li, like the one below.

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

Demo

Answer 2

Try this:

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