Bootstrap 3 glyphicon click-to-click state

Question

Help, I'm looking for the replacement of the glyphicon image to fail at boot 3. I found this topic here Bootstrap 3 Minimize the state with the Chevron symbol This works in jsfiddle, but it fails when copying to my own page, but the icon does not change from the very beginning . Is there something I'm missing? I even posted this in the full Bootstrap 3 boot version, and the icon cannot be replaced. 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 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"); }); 

Answer 1

My colleague had this problem and pointed to this question. Here is 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 switch the panel. It also allows you to have multiple accordions on the same page without chevrons interacting with each other.