Bootstrap 4 Collapsible Card - Choppy Animation

Question

I'm using Bootstrap 4 and have created a card with a .card-header and .card-block like so:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="card-block">
        card block
    </div>
</div>

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 data-toggle="collapse" in the card header). It works - but the animation is extremely choppy.

I can't figure out why. Here's an example on codepen.

Answer 1

Laggy problem:

The problem is the .card-block class, it adds a padding of 1.25rem by default.

If you would remove the class card-block from the div#test-block, and create a div inside with the class card-block (so you keep the padding you require), the laggy problem will go away.

Clicky problem:

There is no class with collapse on your #test-block, so it needs to add it first. That's why it works on the second try.

If you add a class with the name "collapse" to div#test-block, your laggy problem will go away.

If you want the panel to be opened by default, add the "in" class too. e.g. "collapse in".

I have the following code:

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-block">
            card block
        </div>
    </div>
</div>

Answer 2

That probably why bootstrap 4 is still in alpha. It will probably be fix.

The only solution I found is to collapse your card-block by adding the class collapse, and then removing his padding by css :

.card-block{ padding:0; }