Bootstrap Collapse worked with button fine, then, how to work with accordion-heading again?

Question

Let me start with easy English:

I made a jsfiddle example here: http://jsfiddle.net/sangdth/DUsGu/

First, at step 1, click "Go to step 2" button. Then, at step 2, click "Go to step 3" button. At this place, if my customer want to go back to step 1, they click into the link "1. Register phone"

And you can see, the step 1 content show, but the step 3 content will not hide. The same when they click on link "2. Choose Shape", both 1 and 3 content will not hide.

I have no idea how to make it work in both way, mean, Show/Hide with button is clicked, and the Heading also.

I had tried to replace hide, show with toggle but it did not work.

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

Can you help me?

Thank you very much.

P/S: I tried to search, but did not see. If my question is exist and had the answer, please let me know and I will delete my question. Thanks.

Answer 1

Try to add the following code:

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

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

After the document ready function.