Twitter Bootstrap accordion icon doesnt change

accordion, twitter-bootstrap

Solution

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');
});

Problem

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.

Original source