This is an all in one collapse solution. Does not need bootstrap or shadows or anything, but does need jquery.

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">
	<span class="caret">&#11166;</span>
	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">
	<span class="caret">&#11166;</span>
	Click Here to Open the Second Collapse
</h5>
<div class="collapse">
	More stuff to show when collapse 2 opens.
</div>

Note: If there is a bounce when opening collapse, remove margin-top from the triggers (in this case <h5>) and use padding-top instead.

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.