bootstrap-collapse-toggle-icon.html

<script type="text/javascript">
	$(function() {
        	$('.collapse').on('show.bs.collapse', function (e) {
                    $(e.target).siblings("button[data-toggle=collapse]").children("span").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
                });
                $('.collapse').on('hide.bs.collapse', function (e) {
                    $(e.target).siblings("button[data-toggle=collapse]").children("span").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
                });
	});
</script>

<div class="row">	
	<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample0" aria-expanded="false" aria-controls="collapseExample"> 
	<span class="glyphicon glyphicon-chevron-down"></span> Button with data-target 
	</button> 
	<div class="collapse" id="collapseExample0"> 
	<div class="well"> 
	... 
	Content Area for 0 
	... 
	</div> 
	</div> 
</div>