Meu HTML é:

<div id="accordion-container">
    <div class="accordion" id="navaccordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseMenu">
                    <strong>My Menus</strong>
                </a>
            </div>
            <div id="collapseMenu" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <div class="navigation" id="navigationcontainer">
                        <span id="menutree">
                            MenuTree
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQuickLinks">
                    <strong>Quick Links</strong>
                </a>
            </div>
            <div id="collapseQuickLinks" class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="quicklinks" id="quicklinkscontainer">
                        <span id="quicklinkslist">
                            QuickLinks
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQueue">
                    <strong>Queue</strong>
                </a>
            </div>
            <div id="collapseQueue" class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="queue" id="queuecontainer">
                        <span id="queuetree">
                            Queue
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Meu exemplo está aqui:http://jsfiddle.net/pdavis68/Xut4C/2/

Se você remover o código JavaScript, notará que a alternância do recolhimento funciona corretamente. Se você clicar em "Links rápidos", "Meus menus" será fechado e "Links rápidos" será aberto.

Se você deixar o JS, notará que a abertura de "Meus menus" ou "Links rápidos" não causa o recolhimento de mais nada, mas se você abrir "Fila", ainda causará o colapso dos outros.

Parece que não importa se eu usar o comando "alternar", "mostrar" ou "ocultar" no recolhimento, isso interromperá a funcionalidade de alternância.

Além disso, no exemplo, o que deveria acontecer (pelo menos, na minha opinião) é que "Meus menus" devem ser fechados (o que ocorre) e, em seguida, "Links rápidos" devem ser abertos (o que NÃO acontece). )

Então, 2 perguntas:

Como programaticamente mostro / oculto grupos sem interromper a funcionalidade de alternância?

Como alterno as coisas abertas?