Autoswap Bootstrap icon-chevron when using Collapsible

chevron_toggle.html

<a class="btn" data-toggle="collapse" data-target="#my-container">
  Toggle <i class="icon-chevron-right"></i>
</a>

<div id="#my-container">
   ... cool stuff goes here ...
</div>

chevron_toggle.js

//Assumes you have jQuery

$("[data-toggle='collapse']").click(function(e) {
    var $this = $(this);
    var $icon = $this.find("i[class^='icon-chevron']");

    if ($icon.hasClass('icon-chevron-right')) {
        $icon.removeClass('icon-chevron-right').addClass('icon-chevron-down');
    } else {
        $icon.removeClass('icon-chevron-down').addClass('icon-chevron-right');
    }
});