How do I animate a collapse height smoothly for dynamic content?

Asked on Jun 23, 2025

1 Answer

To animate a collapse height smoothly for dynamic content in Bootstrap 5, you can use the `collapse` component with the `data-bs-toggle` attribute. This allows for smooth transitions when expanding or collapsing content.

<!-- BEGIN COPY / PASTE -->
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Toggle Content
        </button>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                This is some dynamic content that will expand and collapse smoothly.
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Ensure you include Bootstrap's JavaScript for the collapse functionality to work.
The `collapse` component automatically handles the smooth transition of height.
Use `data-bs-target` to specify the ID of the content you want to toggle.
The `aria-expanded` attribute helps with accessibility by indicating the current state of the collapsible content.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions