My HTML is:

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

My example is here: http://jsfiddle.net/pdavis68/Xut4C/2/

If you remove the JavaScript code, you'll notice that the toggling of the collapse operates properly. If you click Quick Links, My Menus closes and Quick Links opens.

If you leave the JS in, you'll notice that opening My Menus or Quick Links doesn't cause anything else to collapse, but if you open Queue, it will still cause the others to collapse.

It doesn't seem to matter if I use toggle, show or hide command in the collapse, it will break the toggling functionality.

Also, in the example, what ought to happen (by my reckoning, at least) is that that My Menus should toggle closed (which it does) and then Quick Links ought to toggle open (which it does NOT do.)

So, 2 questions:

1. How do I programmatically show/hide groups without breaking the toggle functionality?




2. How do I toggle things open?