Bootstrap collapse data-parent not working

Question

I'm using bootstrap 2.2.1 and for whatever reason the data-parent attribute is not doing what is intended. It does not close a previous opened target when i click another target. Here's a fiddle with the code below, any ideas on how to fix this ?

<div id="accordion">
    <ul>
        <li>
            <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
            <ul id="document" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>   
        </li>
        <li>
            <a href="#">option 2</a>
        </li>
        <li>
            <a href="#">option 3</a>
        </li>
         <li>
            <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
            <ul id="document2" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>   
        </li>
    </ul>
</div>

Answer 1

I couldn't get this to work either - this may be something in the Bootstrap JS related to the fact that you are using lists rather than divs?

So to get it to work, I had to override the click event. Based on this question here: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap

I added an accordion-toggle class to each option link, and then added the following JavaScript to get it to work:

$(document).on('click', '.accordion-toggle', function(event) {
        event.stopPropagation();
        var $this = $(this);

        var parent = $this.data('parent');
        var actives = parent && $(parent).find('.collapse.in');

        // From bootstrap itself
        if (actives && actives.length) {
            hasData = actives.data('collapse');
            //if (hasData && hasData.transitioning) return;
            actives.collapse('hide');
        }

        var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7

        $(target).collapse('toggle');
});​

This fiddle shows it in action.

Answer 2

It says in the Bootstrap Documents:

If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class)

so it has to be used with panel-groups, but you can override the javascript anyway.

http://getbootstrap.com/javascript/#collapse-options

Answer 3

've been struggling with bootstrap collapse as well. I was trying to something do something slightly different. I wanted inline toggle behavior. See my JS fiddle below. What I found is that bootstrap seems to require the existence of the "accordion-group" div in addition to the data-parent attribute covered in their docs. So either there is a bug in the JS or their docs do not include it. I also had to zero out the styles on the accordion-group div...

http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2">
   <div class="accordion-group" style="border:0;padding:0;margin:0">
      <div id="collapseOne" class="collapse in">
            Foo Bar...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
               Show Herp Derp
            </a>
      </div>
      <div id="collapseTwo" class="collapse">
            Herp Derp...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
               Show Foo Bar
            </a> 
      </div>
   </div>
</div>

Answer 4

You have to use accordion-group class in your items, see issue https://github.com/twitter/bootstrap/issues/4988