javascript event handling with collapsible text icon

[stharrold]

Text collapses but the icon doesn't change.

Relevant post: 20151030-test.md

Collapsible text:  
<div>
    Short answer.
    <div class="btn-group">
        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#details">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
    </div>
    <div id="details" class="collapse">Long answer.</div>
</div>

<!--
Collapsible text
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
http://stackoverflow.com/questions/13778703/adding-open-closed-icon-to-twitter-bootstrap-collapsibles-accordions
-->
<script type="text/javascript">
$('.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");
});
</script>