Bootstrap: Accordion not auto collapsing previously opened panel

Question

I need to create a bootstrap accordion. The markup below works fine, but it does not auto-collapse the previously opened element. For example, open panel1, then click on panel2.. panel1 should then auto-close, but it does not. I have tried copying the markup exactly from the bootstrap site (http://twitter.github.com/bootstrap/javascript.html#collapse), but it is not working. What am I missing?

<h3>ACCORDION DEMO</h3>
<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="accordion1" data-toggle="collapse" href="#panel1">Panel 1</a>
        </div>
        <div class="accordion-body collapse" id="panel1">
            <div class="accordion-inner">
                <p>This is accordion panel 1 content</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="accordion1" data-toggle="collapse" href="#panel2">Panel 2</a>
        </div>
        <div class="accordion-body collapse" id="panel2">
            <div class="accordion-inner">
                <p>This is accordion panel 2 content</p>
            </div>
        </div>
    </div>
</div>

Answer 1

只需用data-parent="#accordion1"替换data-parent="accordion1" data-parent="#accordion1"

Answer 2

For posterity, another reason I just discovered that would prevent the accordion panels from auto-collapsing is if the .panel elements are not direct children of the accordion ( .panel-group element). I had wrapped my panel content in a div within my .panel-group and the accordion didn't like that.

Answer 3

I was experiencing the same behavior, I removed the bootstrap transition module and it worked. Also fixed the issue with disappearing popovers.

Answer 4

我遇到了同样的问题，并根据预感做了一些改变。它有效，现在我想分享我的发现，以防它可以帮助某人...我在多个页面上使用手风琴折叠功能制作它们奇怪的行为..给不同的面板独特的href和面板ID帮助。