Bootstrap 4 Collapse with Masonry

Attempting to get the collapse to readjust the masonry layout in the height direction.

by joshmoto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row" id="cards">
    <div class="col-sm-6 card-item">
      <div class="card">
        <div class="card-block">
          <div role="tab" id="card-1">
            <h3 class="card-title">Lorem ipsum dolor sit amet</h3>
            <a data-toggle="collapse" data-parent="#cards" href="#item-1" aria-expanded="true" aria-controls="item-1" class="collapsed btn btn-primary">
							Click me
						</a>
          </div>
          <div id="item-1" class="collapse" role="tabpanel" aria-labelledby="card-1">
            <p>With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 card-item">
      <div class="card">
        <div class="card-block">
          <div role="tab" id="card-2">
            <h3 class="card-title">Nulla ex lectus, congue sed dignissim ac</h3>
            <a data-toggle="collapse" data-parent="#cards" href="#item-2" aria-expanded="true" aria-controls="item-2" class="collapsed btn btn-primary">
							Click me
						</a>
          </div>
          <div id="item-2" class="collapse" role="tabpanel" aria-labelledby="card-2">
            <p>With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 card-item">
      <div class="card">
        <div class="card-block">
          <div role="tab"...

SCSS

.container {
	margin: 30px auto;
}

.card-item {
	margin-bottom: 30px;
	
	P {
		margin: 10px 0 0 0;
	}
	
}

JavaScript

(function ($) {

	var $masonry = $('#cards');
	$masonry.masonry({
		itemSelector: '.card-item'
	}).on('shown.bs.collapse hidden.bs.collapse', function() {
		$masonry.masonry();
	});
	
})(jQuery);