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

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