CODEWITHSUNDEEP
twitter-bootstrapaccordion
Slava
Slava

Reputation: 6650

Twitter Bootstrap accordion icon doesnt change

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

enter image description here

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

enter image description here

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

enter image description here

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

Thanks.

Upvotes: 16

Views: 18158

Answers (5)

user2045407
user2045407

Reputation: 121

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>

Upvotes: 0

Ravi
Ravi

Reputation: 1

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.

Upvotes: 0

Zoe
Zoe

Reputation: 2169

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

Upvotes: 36

tuscan88
tuscan88

Reputation: 5829

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

Upvotes: 0

OliverP
OliverP

Reputation: 309

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.

Upvotes: 1

Related Questions