Bootstrap accordion/collapsible not working with ul/li navigation

accordion, css, javascript, jquery, twitter-bootstrap

Solution

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

Problem

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

Original source