Collapse

Toggle the visibility of content across your project with a few classes and attributes.

On this page

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 the height from its current value to 0.

Given how CSS handles animations, you cannot use padding attribute on a collapse attribute.

Instead, use the class as an independent wrapping element.

Example

Click the buttons below to show and hide another element.

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

Generally, we recommend using a button with the target attribute.

While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button").

In both cases, the toggle="collapse" attribute is required.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
vue
<template>
  <p>
    <b-button
      margin="e-2"
      button="primary"
      toggle="collapse"
      href="#collapseExample"
    >
      Link with href
    </b-button>
    <b-button
      button="primary"
      toggle="collapse"
      target="#collapseExample"
    >
      Button with target
    </b-button>
  </p>
  <Collapse id="collapseExample">
    <Card>
      <CardBody>
        Some placeholder content for the collapse component. This panel is
        hidden by default but revealed when the user activates the relevant
        trigger.
      </CardBody>
    </Card>
  </Collapse>
</template>

Horizontal

The collapse plugin also supports horizontal collapsing.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
vue
<template>
  <p>
    <b-button
      button="primary"
      toggle="collapse"
      target="#collapseWidthExample"
    >
      Button with target
    </b-button>
  </p>
  <div style="min-height: 120px">
    <Collapse
      id="collapseWidthExample"
      horizontal
    >
      <Card>
        <CardBody style="width: 300px">
          This is some placeholder content for a horizontal collapse. It's
          hidden by default and shown when triggered.
        </CardBody>
      </Card>
    </Collapse>
  </div>
</template>

Multiple targets

A <Button> or <b-a> can show and hide multiple elements by referencing them with a selector in its href or target attribute.

Multiple <Button> or <b-a> can show and hide an element if they each reference it with their href or target attribute

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.
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.
vue
<template>
  <p>
    <b-button
      button="primary"
      toggle="collapse"
      target="#multiCollapseExample1"
    >
      Toggle first element
    </b-button>
    <b-button
      button="primary"
      toggle="collapse"
      target="#multiCollapseExample2"
    >
      Toggle second element
    </b-button>
    <b-button
      button="primary"
      toggle="collapse"
      target=".multi-collapse"
    >
      Toggle both elements
    </b-button>
  </p>
  <Row>
    <Col>
      <Collapse
        id="multiCollapseExample1"
        class="multi-collapse"
      >
        <Card>
          <CardBody>
            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.
          </CardBody>
        </Card>
      </Collapse>
    </Col>
    <Col>
      <Collapse
        id="multiCollapseExample2"
        class="multi-collapse"
      >
        <Card>
          <CardBody>
            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.
          </CardBody>
        </Card>
      </Collapse>
    </Col>
  </Row>
</template>