Twitter Bootstrap accordion icon doesnt change

Twitter Bootstrap accordion icon doesnt change

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.

Solutions/Answers:

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

Solution 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.

Related:  Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

Solution 3:

This is a bug in bootstrap. If you inspect your markup when you toggle one of the headings that has a class of .accordion-toggle it toggles it from having the class collapsed or not. When you click a different heading to the one that is open though it doesn’t add the class of collapsed onto the heading of the open element. This fixed it for me:

$('.accordion-toggle').click(function() {
    if($(this).hasClass('collapsed')) {
        $('.accordion-toggle').not(this).addClass('collapsed');
    }
});

Solution 4:

You can use this code, for changing the icons.

Script part:

jQuery('document').ready(function() {

$('.accordion').on('show hide', function (n) {
    var targetEle = $(n.target).siblings('.accordion-heading').find('.accordion-toggle');
    if($(n.target).hasClass("in")){
        targetEle.children(".icon-chevron-down").show();
        targetEle.children(".icon-chevron-up").hide();
    }
    else{
        targetEle.children(".icon-chevron-down").hide();
        targetEle.children(".icon-chevron-up").show();
    }

});

});

Note: For using this code, in the html part, you have to include both image tags ie. chevron-up and chevron-down.

Solution 5:

Using jquery.js 1.10.2 and bootstrap-collapse.js v2.3.0, this is a rehash of the above. Upon loading the document, it collapses all items but the first one and then handles susequent show/hide events.

$(document).ready(function () {

    $(".accordion-body").on("shown", function (evt) {
        setIcon(evt.target, true);
    });

    $(".accordion-body").on("hidden", function (evt) {
        setIcon(evt.target, false);
    });

    $(".accordion-body").collapse("hide");
    $("#collapse-faq-1").collapse("show");
});

function setIcon(acdBody, isShown) {
    var indicator = "indicator" + acdBody.id.substr(acdBody.id.lastIndexOf("-"));

    if (!isShown) {
        $("#" + indicator).removeClass("icon-chevron-up").addClass("icon-chevron-down");
    } else {
        $("#" + indicator).removeClass("icon-chevron-down").addClass("icon-chevron-up");
    }
}

HTML:

<div class="accordion" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1">
                <i id="indicator-1" class="icon-chevron-down"></i>&nbsp;&nbsp;
                FAQ Item 1
            </a>
        </div>
        <div id="collapse-faq-1" class="accordion-body collapse in">
            <div class="accordion-inner">
                Answer 1 ...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2">
                <i id="indicator-2" class="icon-chevron-down"></i>&nbsp;&nbsp;
                FAQ Item 2
            </a>
        </div>
        <div id="collapse-faq-2" class="accordion-body collapse in">
            <div class="accordion-inner">
                Answer 2 ...
            </div>
        </div>
    </div>
</div>

Related:  Angular-ui tooltip with HTML

References