Bootstrap Collapse нормально работал с кнопкой, тогда как снова работать с аккордеонным заголовком?

Question

Позвольте мне начать с легкого английского:

Я сделал пример jsfiddle здесь: http://jsfiddle.net/sangdth/DUsGu/

Сначала на шаге 1 нажмите кнопку "Перейти к шагу 2". Затем на шаге 2 нажмите кнопку "Перейти к шагу 3". В этом месте, если мой клиент хочет вернуться к шагу 1, он нажимает на ссылку "1. Зарегистрировать телефон"

И вы можете видеть, содержимое шага 1 показывают, но содержимое шага 3 не будет скрыто. То же самое, когда они нажимают на ссылку "2. Выберите фигуру", содержимое 1 и 3 не будет скрыто.

Я понятия не имею, как заставить его работать в обоих направлениях, то есть нажать кнопку "Показать / скрыть с помощью кнопки", а также "Заголовок".

Я пытался заменить hide, show с toggle но это не сработало.

jQuery("#btn-phone").click(function() {
        $("#collapseOne").collapse('hide');
        $("#collapseTwo").collapse('show');
    });

Вы можете мне помочь?

Большое спасибо.

P / S: я пытался искать, но не видел. Если мой вопрос существует и у него есть ответ, пожалуйста, дайте мне знать, и я удалю свой вопрос. Благодарю.

Answer 1

Попробуйте добавить следующий код:

 $('.accordion-toggle').on('shown', function () {
 $(this).addClass('active') });

$('.accordion-toggle').on('hidden', function () {
 $(this).removeClass('active') });

После того, как документ готов к работе.