Bootstrap Collapse force развернуть все

Question

У меня есть куча разных разделов, которые имеют свои собственные элементы свертывания. Я уже реализовал JQuery, чтобы развернуть и свернуть их.

JQuery:

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

HTML-фрагмент:

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

У меня есть пара разных проблем.

1. В Internet Explorer функционал работает только по второму клику и очень скачок. При этом работает по второму нажатию текст кнопки некорректно.
2. Если я открою один из элементов и затем нажму кнопку "Развернуть", развернутся все элементы, кроме того, который был первоначально открыт, он рухнет. По сути .collapse("toggle") функциональность просто меняет режим на открытый или закрытый, он не связан с состоянием, в котором он уже находится.

Answer 1

Похоже, что проблема IE - проблема с Bootstrap. С Google немного, похоже, collapse функциональность нарушается в любом другом выпуске в той или иной форме. Так что, если вы не идете с чем-то, кроме collapse Функция Я не уверен, что вы сможете это исправить. Я вроде исправил это в IE (кнопки раскрытия / сворачивания больше не синхронизируются) и исправил вторую проблему с этим кодом:

$('.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");
    };
});

скрипка

Answer 2

Решение Samsquanch работает правильно, но в моем случае я все же смог получить collapse не синхронизировано время от времени.

Причиной было то, что атрибут данных data-parent="#selector" находится в конфликте с разыскиваемым "expand all" поведение. В документации по Bootstrap указано:

Чтобы добавить управление группами в виде аккордеона в складной элемент управления, добавьте атрибут данных data-parent="#selector",

Так когда "expand all" необходима функциональность, лучше оставить этот атрибут данных или удалить его перед расширением.