Twitter Bootstrap accordion icon doesnt change

Question

I have this accordion thing from bootstrap. The arrow icons point down.

Then I click on Competency1, I get (Competency1 icon up, Competency2 icon down):

But, if I click on Competency2 now, I get (Competency1 icon is still up, Competency2 icon up):

Is this a bug in bootstrap, or it could be easily fixed?

Thanks.

Answer 1

It's hard to offer suggestions without seeing your code. You might be triggering the image swap only on the 'show' event (check for typos in your js).

Here is what I use to create the same effect on my sites:

HTML:

<div class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <i class="icon-chevron-down"></i>
                Collapsible Group Item #1
            </a>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                <i class="icon-chevron-down"></i>
                Collapsible Group Item #2
            </a>
        </div>
    </div>
</div>

JavaScript:

$('.accordion').on('show hide', function (n) {
    $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
});

Answer 2

It appears that this is occurring because clicking on Competency2 collapses Competency1 when Competency1 is already open. Because there is no click event that occurs on Competency1 when it collapses in this manner, the caret is still pointing upward.