Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)

Question

I've set up this simple version of the Bootstrap accordion:

Simple accordion: http://jsfiddle.net/darrenc/cngPS/

Currently the icon only points down, but does anyone know what JS would be needed to be implemented so as to change the class of the icon to:

<i class="icon-chevron-up"></i> 

...so that it points up when expanded and toggles back to down again when collapsed, and so fourth?

Answer 1

Here it's the answer for those who are looking for a solution in Bootstrap 3(like myself).

The HTML part:

<div class="btn-group">   <button type="button" class="btn btn-danger">Action</button>   <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">     <span class="glyphicon glyphicon-minus"></span>   </button> </div> <div id="demo" class="collapse in">Some dummy text in here.</div> 

The js part:

$('.collapse').on('shown.bs.collapse', function(){ $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus"); }).on('hidden.bs.collapse', function(){ $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus"); }); 

---

Example accordion:

Bootply accordion example