Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)
javascript, jquery, twitter-bootstrap
Solution
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
Problem
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?