Bootstrap collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.

🤖 Looking for the LLM-optimized version?View llm.md

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

• Angular Collapse
• React Collapse
• Vue Collapse

How it works

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate theheight from its current value to0. Given how CSS handles animations, you cannot usepadding on a.collapse element. Instead, use the class as an independent wrapping element.

Example

Click the buttons below to show and hide another element via class changes:

• .collapse hides content
• .collapsing is applied during transitions
• .collapse.show shows content

You can use a link with thehref attribute, or a button with thedata-coreui-target attribute. In both samples, thedata-coreui-toggle="collapse"" is required.

<pclass="d-inline-flex gap-1"><aclass="btn btn-primary"data-coreui-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample">    Link with href</a><buttonclass="btn btn-primary"type="button"data-coreui-toggle="collapse"data-coreui-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample">    Button with data-coreui-target</button></p><divclass="collapse"id="collapseExample"><divclass="card card-body">    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</div></div>

Horizontal

The collapse plugin also supports horizontal collapsing. Add the.collapse-horizontal modifier class to transition thewidth instead ofheight and set awidth on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use ourwidth utilities.

<p><buttonclass="btn btn-primary"type="button"data-coreui-toggle="collapse"data-coreui-target="#collapseWidthExample"aria-expanded="false"aria-controls="collapseWidthExample">    Toggle width collapse</button></p><divstyle="min-height: 120px;"><divclass="collapse collapse-horizontal"id="collapseWidthExample"><divclass="card card-body"style="width: 300px;">      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.</div></div></div>

Multiple targets

A<button> or<a> can show and hide multiple elements by referencing them with a selector in itshref ordata-coreui-target attribute.Multiple<button> or<a> can show and hide an element if they each reference it with theirhref ordata-coreui-target attribute

<pclass="d-inline-flex gap-1"><aclass="btn btn-primary"data-coreui-toggle="collapse"href="#multiCollapseExample1"role="button"aria-expanded="false"aria-controls="multiCollapseExample1">Toggle first element</a><buttonclass="btn btn-primary"type="button"data-coreui-toggle="collapse"data-coreui-target="#multiCollapseExample2"aria-expanded="false"aria-controls="multiCollapseExample2">Toggle second element</button><buttonclass="btn btn-primary"type="button"data-coreui-toggle="collapse"data-coreui-target=".multi-collapse"aria-expanded="false"aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button></p><divclass="row"><divclass="col"><divclass="collapse multi-collapse"id="multiCollapseExample1"><divclass="card card-body">        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.</div></div></div><divclass="col"><divclass="collapse multi-collapse"id="multiCollapseExample2"><divclass="card card-body">        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.</div></div></div></div>

Accessibility

Be sure to addaria-expanded to the control component. This attribute explicitly sends the current state of the collapsible element connected to the control to screen readers and related assistive technologies. If the collapsible part is closed by default, the attribute on the control element should have a value ofaria-expanded="false". If you have set the collapsible element to be open by default using theshow class, setaria-expanded="true" on the control alternatively. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an<a> or<div>), the attributerole="button" should be added to the element.

If your control element is targeting a single collapsible element – i.e., thedata-coreui-target attribute is pointing to anid selector – you should attach thearia-controls attribute to the control part, including theid of the collapsible element. Modern screen readers and related assistive technologies address this attribute to provide users with extra shortcuts to navigate directly to the collapsible element itself.

Note that CoreUI for Bootstrap’s current implementation does not cover the variousoptional keyboard interactions described in theWAI-ARIA Authoring Practices 1.1 accordion pattern - you will need to include these yourself with custom JavaScript.

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.show shows the content
• .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in_transitions.scss.

Via data attributes

Just adddata-coreui-toggle="collapse" and adata-coreui-target to the element to automatically assign control of one or more collapsible elements. Thedata-coreui-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the classcollapse to the collapsible element. If you’d like it to default open, add the additional classshow.

To add accordion-like group management to a collapsible area, add the data attributedata-coreui-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

constcollapseElementList=document.querySelectorAll('.collapse')constcollapseList=[...collapseElementList].map(collapseEl=>newcoreui.Collapse(collapseEl))

Options

Options can be passed using data attributes or JavaScript. To do this, append an option name todata-coreui-, such asdata-coreui-animation="{value}". Remember to convert the case of the option name from “camelCase” to “kebab-case” when using data attributes. For instance, you should writedata-coreui-custom-class="beautifier" rather thandata-coreui-customClass="beautifier".

Starting with CoreUI 4.2.0, all components support anexperimental reserved data attribute nameddata-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributesdata-coreui-config='{"delay":50, "title":689}' anddata-coreui-title="Custom Title", then the final value fortitle will beCustom Title, as the standard data attributes will take precedence over values specified indata-coreui-config. Moreover, existing data attributes can also hold JSON values likedata-coreui-delay='{"show":50, "hide":250}'.

Methods

Activates your content as a collapsible element. Accepts an optional optionsobject.

You can create a collapse instance with the constructor, for example:

constbsCollapse=newcoreui.Collapse('#myCollapse',{toggle:false})

Events

CoreUI for Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

constmyCollapsible=document.getElementById('myCollapsible')myCollapsible.addEventListener('hidden.coreui.collapse',event=>{// do something...})

Customization

SASS variables

$transition-collapse:height.35sease;$transition-collapse-width:width.35sease;

Classes

Collapse transition classes can be found inscss/_transitions.scss as these are shared across multiple components (collapse and accordion).

.collapse{&:not(.show){display:none;}}.collapsing{height:0;overflow:hidden;@include transition($transition-collapse);&.collapse-horizontal{width:0;height:auto;@include transition($transition-collapse-width);}}

CoreUI vs Bootstrap

While this Collapse component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

• ✅Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
• 🧠Framework-native versions – CoreUI provides dedicated libraries forReact.js,Vue.js, andAngular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
• 👨‍💻Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
• 📦More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
• 🛠️Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
• 🌍Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
• 🔒LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉Explore CoreUI Bootstrap Components
👉Compare CoreUI vs Bootstrap