Bootstrap Collapse force expand all

问题:

I have a bunch of different sections that have their own collapse elements. I have already implemented the jquery to expand and collapse them.

jQuery:

$('.collapse').each(function (index) {
    $(this).collapse("toggle");
});

HTML Snippet:

<ul class="nav nav-tabs">
    <li class="active" id="General"><a href="#">General</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active">                                                                                                                                                                             
        <div class="accordion" id="accordion2">                                                
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFour">Q. Can I choose my own Username and Password?</a>
                </div>
                <div id="collapseFour" class="accordion-body collapse">
                    <div class="accordion-inner">A. Yes, you can choose your own Username and Password.  We suggest using your email address for your Username, but any username that is between 8 and 20 characters long could be used.  A secure Password should be 8 to 20 characters long, with no spaces, and contains at least one special character.  </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFive">Q. Can I update by email address online?</a>
                </div>
                <div id="collapseFive" class="accordion-body collapse">
                    <div class="accordion-inner">A. Yes, but I have no idea how right now.  </div>
                </div>
            </div>
        </div>
    <a href="#top" class="btn btn-mini top"><i class="icon-arrow-up"></i> Back To Top</a>
</div>

http://jsfiddle.net/RmK2h/

There are a couple different problems I'm having.

1. In Internet Explorer the functionality only works on the second click and is very jump. With it working on the second click the button text is incorrect.
2. If I open one of the elements and then click the expand button all elements expand except the one that was originally opened, it collapses. Essentially the .collapse("toggle") functionality simply changes the mode to either open or closed it isn't concerned with the state it's already in.

回答1:

It looks like the IE problem is an issue with Bootstrap. From Googling a bit, it looks like the collapse functionality breaks in every other release in some form or another. So, unless you go with something other than the collapse function I'm not sure you're going to be able to fix that. I sort of fixed it in IE (the expand/collapse buttons don't get out of sync anymore) and fixed your second problem with this code:

$('.expandcollapse').click(function () {
    if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") {
        $('.collapse:not(.in)').each(function (index) {
            $(this).collapse("toggle");
        });
        $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
    }
    else {
        $('.collapse.in').each(function (index) {
            $(this).collapse("toggle");
        });
        $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
    };
});

Fiddle

回答2:

Samsquanch's solution works correctly, but in my case I was still able to get collapse out of sync once in a while.

The reason was that the data attribute data-parent="#selector" is in conflict with the wanted "expand all" behavior. The Bootstrap documentation points out:

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector".

So when "expand all" functionality is needed, it's better to leave that data attribute out or remove it before expanding.