BOOTSTRAP: Change Icons for Collapse Open/Closed

Change the open and closed icon when using collapses in Bootstrap. 

Feb 2024 Update: This now works for any collapse toggle without js for every collapse ID.

Requirements: Font Awesome, Bootstrap, and Jquery

1. Add toggle-collapse class to the trigger, in this case the button.

2. Add toggle-icon class to the font awesome icon call.

3. Include js below jquery call

<button class="toggle-collapse btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
	<i class="toggle-icon fa fa-caret-right"></i> Click Me One
</button>

<div class="collapse" id="collapseExample">
	content in collapse ....
</div>

<button class="toggle-collapse btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
	<i class="toggle-icon fa fa-caret-right"></i> Click Me Two
</button>


<div class="collapse" id="collapseExample2">
	content in collapse ....
</div>

This goes under Jquery:

<script>
	$('.toggle-collapse').click(function(){
		$(this).find('.toggle-icon').toggleClass('fa-caret-right fa-caret-down');
	});
</script>