Collapse

Toggle visibility for panels, disclosures, and compact detail regions.

How it works

  • The collapse plugin shows and hides helper-rendered regions by animating height or width through Bootstrap's transition classes.
  • Collapse toggles the .collapse, .collapsing, and .show classes to animate visibility.
  • Triggers use data-bs-toggle="collapse" with data-bs-target or href pointing at the collapsible element.
  • For multiple targets, a trigger may point at a selector such as .multi-collapse-docs.
  • Horizontal collapse requires .collapse-horizontal and an explicit width on the immediate child.
  • Collapse transitions follow Bootstrap's reduced-motion behavior for users who request reduced motion.

Example

Use Bootstrap data attributes to connect a trigger to a collapsible region. Prefer a button trigger for in-page behavior; an anchor trigger can be used when link semantics are required.

This panel is hidden by default and becomes measurable after either trigger opens it.
aspnet 

<bs-p display="InlineFlex" gap="Default1">
    <bs-button btn-style="Primary" href="#collapseDocsExample" role="button" data-bs-toggle="@("collapse")" aria-expanded="False" aria-controls="collapseDocsExample">Link with href</bs-button>
    <bs-button btn-style="Primary" data-bs-toggle="@("collapse")" data-bs-target="#collapseDocsExample" aria-expanded="False" aria-controls="collapseDocsExample">Button with data target</bs-button>
</bs-p>
<bs-collapse id="collapseDocsExample" expanded="false">
    <bs-card>
        <bs-card-body>
            This panel is hidden by default and becomes measurable after either trigger opens it.
        </bs-card-body>
    </bs-card>
</bs-collapse>

Horizontal

Horizontal collapse animates width, so the immediate child has an explicit width.
aspnet 

<bs-button btn-style="Primary" data-bs-toggle="@("collapse")" data-bs-target="#collapseWidthDocsExample" aria-expanded="False" aria-controls="collapseWidthDocsExample">Toggle width collapse</bs-button>
<bs-div style="min-height: 7rem;">
    <bs-collapse id="collapseWidthDocsExample" horizontal="true" expanded="false" top-margin="Default3">
        <bs-card style="width: 20rem;">
            <bs-card-body>
                Horizontal collapse animates width, so the immediate child has an explicit width.
            </bs-card-body>
        </bs-card>
    </bs-collapse>
</bs-div>

Multiple toggles and targets

First collapsible target.
Second collapsible target.
aspnet 

<bs-p display="InlineFlex" gap="Default1" flex-wrap="Wrap">
    <bs-button btn-style="Primary" data-bs-toggle="@("collapse")" data-bs-target="#multiCollapseOne" aria-expanded="False" aria-controls="multiCollapseOne">Toggle first</bs-button>
    <bs-button btn-style="Primary" data-bs-toggle="@("collapse")" data-bs-target="#multiCollapseTwo" aria-expanded="False" aria-controls="multiCollapseTwo">Toggle second</bs-button>
    <bs-button btn-style="Secondary" data-bs-toggle="@("collapse")" data-bs-target=".multi-collapse-docs" aria-expanded="False" aria-controls="multiCollapseOne multiCollapseTwo">Toggle both</bs-button>
</bs-p>
<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span="Six">
        <bs-collapse id="multiCollapseOne" expanded="false" class="multi-collapse-docs">
            <bs-card>
                <bs-card-body>First collapsible target.</bs-card-body>
            </bs-card>
        </bs-collapse>
    </bs-div>
    <bs-div span="Six">
        <bs-collapse id="multiCollapseTwo" expanded="false" class="multi-collapse-docs">
            <bs-card>
                <bs-card-body>Second collapsible target.</bs-card-body>
            </bs-card>
        </bs-collapse>
    </bs-div>
</bs-row>

Accessibility

  • Every trigger should include aria-expanded and aria-controls. Bootstrap updates aria-expanded automatically after toggles.
  • Use a button trigger for in-page disclosure controls unless navigation semantics are required.
  • Keep collapsed content close to its trigger in the reading order when possible.
  • For accordion-like semantics, use the BCL accordion helpers instead of composing raw collapse panels.

CSS

Sass variables

Bootstrap collapse transition variables control height and width animation timing. Keep those values in the compiled stylesheet and use bs-collapse for the region markup.

Classes

  • bs-collapse renders Bootstrap's base .collapse class.
  • Set expanded="true" when content should render open with Bootstrap's .show state.
  • Set horizontal="true" for horizontal collapse; the helper adds the horizontal class while the child still needs a width.
  • Bootstrap adds and removes .collapsing during transitions.

Usage

Collapse can be triggered with data attributes or through JavaScript. Use <bs-collapse> for the collapsible region and point triggers at its id or selector.

Via data attributes

Add data-bs-toggle="collapse" and either data-bs-target or href to a trigger. If the collapsible target should default open, set expanded="true" on bs-collapse.

aspnet 

<bs-button btn-style="Primary" data-bs-toggle="collapse" data-bs-target="#docsCollapse" aria-controls="docsCollapse" aria-expanded="false">Toggle content</bs-button>
<bs-collapse id="docsCollapse">
<bs-card card-content="Body">Collapsed content</bs-card>
</bs-collapse>

Via JavaScript

Bootstrap's JavaScript API can create collapse instances for helper-rendered regions by selecting the emitted .collapse elements.

aspnet 

const collapseElement = document.querySelector('#docsCollapse');
const collapse = bootstrap.Collapse.getOrCreateInstance(collapseElement, {
toggle: false
});
collapse.show();

Options

  • toggle controls whether a collapse instance toggles immediately when created. It defaults to true.
  • parent constrains open panels to a parent container, which is how accordion-like behavior is coordinated. Put the data attribute on the collapsible target.
  • Bootstrap options can be passed with data-bs-* attributes when no BCL property exists.

Methods

Bootstrap collapse methods such as show, hide, toggle, dispose, and getOrCreateInstance operate on the helper-rendered element. Transition methods return after the transition starts, not after it completes.

javascript 

const collapse = bootstrap.Collapse.getOrCreateInstance('#docsCollapse');
collapse.toggle();
collapse.hide();
collapse.dispose();

Events

Open the console to inspect collapse lifecycle events.
javascript 

<bs-button btn-style="Secondary" data-bs-toggle="@("collapse")" data-bs-target="#collapseEventDocsExample" aria-expanded="False" aria-controls="collapseEventDocsExample">Toggle event panel</bs-button>
<bs-collapse top-margin="Default3" id="collapseEventDocsExample" expanded="false">
    <bs-card>
        <bs-card-body>Open the console to inspect collapse lifecycle events.</bs-card-body>
    </bs-card>
</bs-collapse>