bootstrap 3 glyphicon swap state on click

Question

Help, I am looking to have the glyphicon image swap on collapse in bootstrap 3. I found this thread here Bootstrap 3 Collapse show state with Chevron icon This works in jsfiddle but when copied to my own page the collapse works but the icon does not swap from up to down. Is there something I am missing? I have even placed this in a full download version of Bootstrap 3 and the icon fails to swap out. Here is the code:

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1 
    </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high...
  </div>
</div>
</div>
</div>
</div>

and here is the js:

$('#accordion .accordion-toggle').click(function (e){
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down       glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

I was able to get it figured out. No need to respond to this. For those interested in the fix I moved the JS to the very bottom of the page below the two js scripts calling for the bootstrap.js and the jquery.js files. — user2752699, Sep 06 '13 at 02:14
If you're interested in any credit for said fix it would be better to include it in a proper answer. As it is you're not even linking to the page you mention, and besides, Nobody Reads Live Sites' Source (tm). — millimoose, Sep 06 '13 at 22:37
Hi, in this example, how do i make the entire heading a hyperlink instead of just the text. in other words, when i click on the heading panel, not just the text, i want to display to toggle. how do i do that? — user1447718, Sep 19 '13 at 00:17
possible duplicate of [Bootstrap 3 Collapse show state with Chevron icon](http://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon) — zessx, Nov 29 '13 at 10:58

score 3 · Answer 1 · answered Apr 25 '14 at 16:42

A coworker of mine just had this problem and pointed me to this question. Here's the solution I gave him:

HTML:

<div class="panel-group move-down" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <h4 class="panel-title">
                    Collapsible Group Item #1
                    <i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
                </h4>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
            ...
            </div>
        </div>
    </div>
</div>

JavaScript:

$.fn.accordionChevrons = function() {
    return this.each(function(i, accordion) {
        $(".accordion-toggle", accordion).click(function(ev) {
            var link = ev.target;
            var header = $(link).closest(".panel-heading");
            var chevState = $("i.indicator", header)
                .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
            $("i.indicator", accordion)
                .not(chevState)
                .removeClass("glyphicon-chevron-down")
                .addClass("glyphicon-chevron-up");
        });
    });
};

$('#accordion').accordionChevrons();

This method allows the chevron to be anywhere in the header, so you can also click on the chevron to toggle the panel. It also allows you to have multiple accordions on the same page without the chevrons interfering with each other.

bootstrap 3 glyphicon swap state on click

1 Answers1

Linked