Collapse

Show and hide content. Bootstrap 6 animates the size in CSS, so there is no JavaScript animation code.

Bootstrap’s collapse docs describe the markup and CSS.

Example

Give the collapse a template reference and pass it to bsCollapseToggle. The toggle keeps aria-expanded and aria-controls up to date.

Some placeholder content for the collapse component. This panel is hidden by default and revealed when the user activates the toggle.

HTML

<p class="d-flex gap-2">
  <button type="button" bsButton theme="primary" [bsCollapseToggle]="details">
    Toggle details
  </button>
</p>
<div bsCollapse #details="bsCollapse">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default and
    revealed when the user activates the toggle.
  </div>
</div>

Two-way binding

Bind [(open)] to control the collapse from any element. shown and hidden emit after the transition.

Show advanced options

Advanced options go here.

Events: none

<div bsFormField class="mb-3">
  <input type="checkbox" bsCheck [checked]="open()" (change)="open.set(!open())" />
  <label bsLabel>Show advanced options</label>
</div>
<div bsCollapse [(open)]="open" (shown)="log('shown')" (hidden)="log('hidden')">
  <div class="card card-body">Advanced options go here.</div>
</div>
<p class="mt-3 mb-0 fs-sm fg-3">Events: {{ events().join(', ') || 'none' }}</p>

Horizontal

Add horizontal to animate the width. Give the child element a fixed width.

This is some placeholder content for a horizontal collapse.

HTML

<p>
  <button type="button" bsButton theme="primary" [bsCollapseToggle]="side">Toggle width</button>
</p>
<div style="min-height: 120px">
  <div bsCollapse horizontal #side="bsCollapse">
    <div class="card card-body" style="width: 300px">
      This is some placeholder content for a horizontal collapse.
    </div>
  </div>
</div>

API

BsCollapse

Selector: [bsCollapse] · Exported as: bsCollapse

Inputs

Name	Type	Default	Description
`open`	`boolean`	`false`	Whether the content is shown. Supports [(open)].
`horizontal`	`boolean`	`false`	Animates the width instead of the height.
`id`	`string`	`generated`	Element id, used for aria-controls.

Outputs

Name	Type	Description
`openChange`	`boolean`	Emits when a method or toggle changes the state.
`shown`	`void`	Emits after the content is shown.
`hidden`	`void`	Emits after the content is hidden.

Methods

Name	Type	Description
`show()`	`void`	Shows the content.
`hide()`	`void`	Hides the content.
`toggle()`	`void`	Toggles the content.
`isOpen`	`Signal<boolean>`	Current open state.

BsCollapseToggle

Selector: [bsCollapseToggle]

Inputs

Name	Type	Default	Description
`bsCollapseToggle`	`BsCollapse`	`required`	The collapse to toggle.