Twitter Bootstrap accordion icon doesnt change

Question

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

Answer 1

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:

    

        

            
                  
                FAQ Item 1
            
        
        

            

                Answer 1 ...
            
        
    
    

        

            
                  
                FAQ Item 2
            
        
        

            

                Answer 2 ...