Question

56

Bootstrap 4 Collapsible Card - Choppy Animation

rated 0 times [ 60] [ 4] / answers: 1 / hits: 28618 / 9 Years ago, tue, november 10, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harrisa

Add To Favorites

Follow

Total Points: 514

Total Questions: 93

Total Answers: 93

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

answered 9 Years ago tylerdamiena · Accepted Answer

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>