This collapse is based on classes and affects the element immediately under the trigger. There can be one or more of these collapses.

<style>
	.collapse {
		display: none;
	}
	.collapse-trigger { cursor: pointer; }
</style>

<h5 class="c-heading-foxtrot collapse-trigger">Click Here to Open the First Collapse</h5>

<div class="collapse">
	Some stuff to show when collapse 1 opens.
</div>

<h5 class="c-heading-foxtrot collapse-trigger">Click Here to Open the Second Collapse</h5>

<div class="collapse">
	More stuff to show when collapse 2 opens.
</div>

JQUERY JS

<script>
$(".collapse-trigger").click(function () {
	$header = $(this);
	$caret = $('.caret',this);
	$content = $header.next();
	$content.slideToggle(500, function () {
		$caret.html(function () {
			return $content.is(":visible") ? "&#11167;" : "&#11166;";
		});
	});
});
</script>

The HTML entities above are for a right caret and a down caret for content that is open and closed. Font awesome code or any other HTML can be substituted.

Probably wouldn't be too difficult to add an ID target to the trigger similar to bootstrap, although most collapses open under the trigger anyway.