title: Bootstrap 4 Collapsible Card - Choppy Animation
body: <p>I'm using Bootstrap 4 and have created a card with a .card-header and .card-block like so:</p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="card-header"&gt;
          &lt;a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block"&gt;
              card header
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="test-block" class="card-block"&gt;
          card block
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to click the card header to toggle the card block. I've tried using Bootstrap's collapse mechanism (you'll notice the <code>data-toggle="collapse"</code> in the card header). It works - but the animation is extremely choppy.</p>
  
  <p>I can't figure out why. <a href="http://codepen.io/joelbyrd/pen/pjQeWr" rel="nofollow">Here's an example on codepen</a>.</p>